@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/copy-button/copy-code.ts

@@ -0,0 +1,42 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScCopyButton } from './copy-button';
+
+@Component({
+  selector: '[sc-copy-code]',
+  template: `
+    <div class="relative">
+      <pre [class]="preClass()"><code><ng-content /></code></pre>
+      <button
+        sc-copy-button
+        [value]="value()"
+        class="absolute right-2 top-2"
+        [variant]="'ghost'"
+        [size]="'icon'"
+      ></button>
+    </div>
+  `,
+  host: {
+    'data-slot': 'copy-code',
+    '[class]': 'class()',
+  },
+  imports: [ScCopyButton],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScCopyCode {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly value = input.required<string>();
+
+  protected readonly class = computed(() => cn('block', this.classInput()));
+
+  protected readonly preClass = computed(() =>
+    cn('rounded-lg bg-muted p-4 pr-12 overflow-x-auto text-sm', 'font-mono'),
+  );
+}

package/src/lib/components/copy-button/copy-input.ts

@@ -0,0 +1,54 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScCopyButton } from './copy-button';
+
+@Component({
+  selector: '[sc-copy-input]',
+  template: `
+    <div class="flex">
+      <input
+        type="text"
+        [value]="value()"
+        [readonly]="readonly()"
+        [class]="inputClass()"
+      />
+      <button
+        sc-copy-button
+        [value]="value()"
+        [variant]="'outline'"
+        [size]="'icon'"
+        class="rounded-l-none border-l-0"
+      ></button>
+    </div>
+  `,
+  host: {
+    'data-slot': 'copy-input',
+    '[class]': 'class()',
+  },
+  imports: [ScCopyButton],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScCopyInput {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly value = input.required<string>();
+  readonly readonly = input<boolean>(true);
+
+  protected readonly class = computed(() =>
+    cn('inline-block', this.classInput()),
+  );
+
+  protected readonly inputClass = computed(() =>
+    cn(
+      'flex h-9 w-full rounded-md rounded-r-none border border-input bg-transparent px-3 py-1 text-sm shadow-sm',
+      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+      this.readonly() && 'bg-muted text-muted-foreground',
+    ),
+  );
+}

package/src/lib/components/copy-button/index.ts

@@ -0,0 +1,4 @@
+export { ScCopyButton } from './copy-button';
+export { ScCopyButtonWithText } from './copy-button-with-text';
+export { ScCopyInput } from './copy-input';
+export { ScCopyCode } from './copy-code';

package/src/lib/components/countdown/README.md

@@ -0,0 +1,168 @@
+# Countdown
+
+Countdown timer with multiple variants, customizable labels, and completion events.
+
+## Components
+
+- `ScCountdown` - Full countdown display with days, hours, minutes, seconds
+- `ScCountdownSimple` - Inline countdown text
+
+## Usage
+
+### Basic Countdown
+
+```html
+<sc-countdown [targetDate]="futureDate" (complete)="onComplete()" />
+```
+
+### Simple Countdown
+
+```html
+<sc-countdown-simple [targetDate]="futureDate" format="hh:mm:ss" />
+```
+
+### Cards Variant
+
+```html
+<sc-countdown [targetDate]="futureDate" variant="cards" />
+```
+
+## API
+
+### ScCountdown
+
+| Input            | Type                                | Default     | Description            |
+| ---------------- | ----------------------------------- | ----------- | ---------------------- |
+| `class`          | `string`                            | `''`        | Additional CSS classes |
+| `targetDate`     | `Date`                              | -           | **Required.** End date |
+| `autoStart`      | `boolean`                           | `true`      | Start automatically    |
+| `showDays`       | `boolean`                           | `true`      | Show days unit         |
+| `showHours`      | `boolean`                           | `true`      | Show hours unit        |
+| `showMinutes`    | `boolean`                           | `true`      | Show minutes unit      |
+| `showSeconds`    | `boolean`                           | `true`      | Show seconds unit      |
+| `alwaysShowDays` | `boolean`                           | `false`     | Show days even if 0    |
+| `showSeparator`  | `boolean`                           | `true`      | Show separators        |
+| `separator`      | `string`                            | `':'`       | Separator character    |
+| `daysLabel`      | `string`                            | `'Days'`    | Days label text        |
+| `hoursLabel`     | `string`                            | `'Hours'`   | Hours label text       |
+| `minutesLabel`   | `string`                            | `'Minutes'` | Minutes label text     |
+| `secondsLabel`   | `string`                            | `'Seconds'` | Seconds label text     |
+| `variant`        | `'default' \| 'compact' \| 'cards'` | `'default'` | Visual variant         |
+
+| Output     | Type            | Description               |
+| ---------- | --------------- | ------------------------- |
+| `tick`     | `CountdownTime` | Emits every second        |
+| `complete` | `void`          | Emits when countdown ends |
+
+| Method        | Returns         | Description             |
+| ------------- | --------------- | ----------------------- |
+| `start()`     | `void`          | Start the countdown     |
+| `stop()`      | `void`          | Stop the countdown      |
+| `reset()`     | `void`          | Reset to initial time   |
+| `getTime()`   | `CountdownTime` | Get current time values |
+| `isRunning()` | `boolean`       | Check if running        |
+
+### ScCountdownSimple
+
+| Input        | Type                              | Default      | Description            |
+| ------------ | --------------------------------- | ------------ | ---------------------- |
+| `class`      | `string`                          | `''`         | Additional CSS classes |
+| `targetDate` | `Date`                            | -            | **Required.** End date |
+| `format`     | `'hh:mm:ss' \| 'mm:ss' \| 'full'` | `'hh:mm:ss'` | Display format         |
+| `autoStart`  | `boolean`                         | `true`       | Start automatically    |
+
+| Output     | Type     | Description               |
+| ---------- | -------- | ------------------------- |
+| `tick`     | `number` | Emits remaining ms        |
+| `complete` | `void`   | Emits when countdown ends |
+
+| Method           | Returns  | Description         |
+| ---------------- | -------- | ------------------- |
+| `start()`        | `void`   | Start the countdown |
+| `stop()`         | `void`   | Stop the countdown  |
+| `getRemaining()` | `number` | Get remaining ms    |
+
+## CountdownTime Interface
+
+```typescript
+interface CountdownTime {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  total: number; // Total milliseconds remaining
+}
+```
+
+## Variants
+
+| Variant   | Description                   |
+| --------- | ----------------------------- |
+| `default` | Large numbers with labels     |
+| `compact` | Smaller, space-efficient      |
+| `cards`   | Each unit in a card container |
+
+## Format Options (Simple)
+
+| Format     | Example Output | Description               |
+| ---------- | -------------- | ------------------------- |
+| `hh:mm:ss` | `02:30:45`     | Hours, minutes, seconds   |
+| `mm:ss`    | `150:45`       | Total minutes and seconds |
+| `full`     | `2d 02:30:45`  | Days prefix when > 0      |
+
+## Examples
+
+### Product Launch
+
+```html
+<div class="text-center">
+  <h2>Coming Soon</h2>
+  <sc-countdown [targetDate]="launchDate" variant="cards" daysLabel="DAYS" hoursLabel="HRS" minutesLabel="MIN" secondsLabel="SEC" (complete)="showLaunch()" />
+</div>
+```
+
+### Flash Sale
+
+```html
+<div class="sale-banner">
+  <span>Sale ends in:</span>
+  <sc-countdown-simple [targetDate]="saleEndDate" format="hh:mm:ss" class="font-bold" />
+</div>
+```
+
+### Event Timer
+
+```typescript
+@Component({
+  template: `
+    <sc-countdown #timer [targetDate]="eventDate" [autoStart]="false" (complete)="onEventStart()" />
+    <button (click)="timer.start()">Start</button>
+    <button (click)="timer.stop()">Pause</button>
+  `,
+})
+export class EventTimer {
+  eventDate = new Date('2024-12-31T23:59:59');
+
+  onEventStart() {
+    console.log('Happy New Year!');
+  }
+}
+```
+
+### Quiz Timer
+
+```html
+<sc-countdown-simple [targetDate]="quizEndTime" format="mm:ss" class="text-xl" (complete)="submitQuiz()" />
+```
+
+### Custom Labels
+
+```html
+<sc-countdown [targetDate]="date" daysLabel="D" hoursLabel="H" minutesLabel="M" secondsLabel="S" />
+```
+
+## Accessibility
+
+- Container has `role="timer"` for screen readers
+- Dynamic `aria-label` with human-readable time remaining
+- Updates announce remaining time contextually

package/src/lib/components/countdown/countdown-simple.ts

@@ -0,0 +1,118 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  inject,
+  input,
+  output,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'sc-countdown-simple',
+  exportAs: 'scCountdownSimple',
+  template: `
+    <span [class]="class()" role="timer">
+      {{ formattedTime() }}
+    </span>
+  `,
+  host: {
+    'data-slot': 'countdown-simple',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScCountdownSimple {
+  private readonly destroyRef = inject(DestroyRef);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly targetDate = input.required<Date>();
+  readonly format = input<'hh:mm:ss' | 'mm:ss' | 'full'>('hh:mm:ss');
+  readonly autoStart = input<boolean>(true);
+
+  readonly tick = output<number>();
+  readonly complete = output<void>();
+
+  private readonly remaining = signal(0);
+  private intervalId: ReturnType<typeof setInterval> | null = null;
+  private isComplete = false;
+
+  constructor() {
+    effect(() => {
+      if (this.autoStart()) {
+        this.start();
+      }
+    });
+
+    this.destroyRef.onDestroy(() => {
+      this.stop();
+    });
+  }
+
+  protected readonly class = computed(() =>
+    cn('font-mono tabular-nums', this.classInput()),
+  );
+
+  protected readonly formattedTime = computed(() => {
+    const total = this.remaining();
+    const format = this.format();
+
+    const seconds = Math.floor((total / 1000) % 60);
+    const minutes = Math.floor((total / 1000 / 60) % 60);
+    const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
+    const days = Math.floor(total / (1000 * 60 * 60 * 24));
+
+    const pad = (n: number) => n.toString().padStart(2, '0');
+
+    if (format === 'mm:ss') {
+      const totalMinutes = Math.floor(total / 1000 / 60);
+      return `${pad(totalMinutes)}:${pad(seconds)}`;
+    }
+
+    if (format === 'full') {
+      if (days > 0) {
+        return `${days}d ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+      }
+      return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+    }
+
+    return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+  });
+
+  private updateTime(): void {
+    const now = Date.now();
+    const target = this.targetDate().getTime();
+    const total = Math.max(0, target - now);
+
+    this.remaining.set(total);
+    this.tick.emit(total);
+
+    if (total <= 0 && !this.isComplete) {
+      this.isComplete = true;
+      this.complete.emit();
+      this.stop();
+    }
+  }
+
+  start(): void {
+    this.stop();
+    this.isComplete = false;
+    this.updateTime();
+    this.intervalId = setInterval(() => this.updateTime(), 1000);
+  }
+
+  stop(): void {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+  }
+
+  getRemaining(): number {
+    return this.remaining();
+  }
+}

package/src/lib/components/countdown/countdown.ts

@@ -0,0 +1,235 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  inject,
+  input,
+  output,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+export interface CountdownTime {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  total: number;
+}
+
+@Component({
+  selector: 'sc-countdown',
+  exportAs: 'scCountdown',
+  template: `
+    <div
+      [class]="containerClass()"
+      role="timer"
+      [attr.aria-label]="ariaLabel()"
+    >
+      @if (showDays() && (time().days > 0 || alwaysShowDays())) {
+        <div [class]="unitClass()">
+          <span [class]="valueClass()">{{ padNumber(time().days) }}</span>
+          <span [class]="labelClass()">{{ daysLabel() }}</span>
+        </div>
+        @if (showSeparator()) {
+          <span [class]="separatorClass()">{{ separator() }}</span>
+        }
+      }
+
+      @if (showHours()) {
+        <div [class]="unitClass()">
+          <span [class]="valueClass()">{{ padNumber(time().hours) }}</span>
+          <span [class]="labelClass()">{{ hoursLabel() }}</span>
+        </div>
+        @if (showSeparator() && showMinutes()) {
+          <span [class]="separatorClass()">{{ separator() }}</span>
+        }
+      }
+
+      @if (showMinutes()) {
+        <div [class]="unitClass()">
+          <span [class]="valueClass()">{{ padNumber(time().minutes) }}</span>
+          <span [class]="labelClass()">{{ minutesLabel() }}</span>
+        </div>
+        @if (showSeparator() && showSeconds()) {
+          <span [class]="separatorClass()">{{ separator() }}</span>
+        }
+      }
+
+      @if (showSeconds()) {
+        <div [class]="unitClass()">
+          <span [class]="valueClass()">{{ padNumber(time().seconds) }}</span>
+          <span [class]="labelClass()">{{ secondsLabel() }}</span>
+        </div>
+      }
+    </div>
+  `,
+  host: {
+    'data-slot': 'countdown',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScCountdown {
+  private readonly destroyRef = inject(DestroyRef);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly targetDate = input.required<Date>();
+  readonly autoStart = input<boolean>(true);
+  readonly showDays = input<boolean>(true);
+  readonly showHours = input<boolean>(true);
+  readonly showMinutes = input<boolean>(true);
+  readonly showSeconds = input<boolean>(true);
+  readonly alwaysShowDays = input<boolean>(false);
+  readonly showSeparator = input<boolean>(true);
+  readonly separator = input<string>(':');
+  readonly daysLabel = input<string>('Days');
+  readonly hoursLabel = input<string>('Hours');
+  readonly minutesLabel = input<string>('Minutes');
+  readonly secondsLabel = input<string>('Seconds');
+  readonly variant = input<'default' | 'compact' | 'cards'>('default');
+
+  readonly tick = output<CountdownTime>();
+  readonly complete = output<void>();
+
+  protected readonly time = signal<CountdownTime>({
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+    total: 0,
+  });
+
+  private intervalId: ReturnType<typeof setInterval> | null = null;
+  private isComplete = false;
+
+  constructor() {
+    effect(() => {
+      if (this.autoStart()) {
+        this.start();
+      }
+    });
+
+    this.destroyRef.onDestroy(() => {
+      this.stop();
+    });
+  }
+
+  protected readonly ariaLabel = computed(() => {
+    const t = this.time();
+    const parts: string[] = [];
+    if (t.days > 0) parts.push(`${t.days} days`);
+    if (t.hours > 0) parts.push(`${t.hours} hours`);
+    if (t.minutes > 0) parts.push(`${t.minutes} minutes`);
+    parts.push(`${t.seconds} seconds`);
+    return `Time remaining: ${parts.join(', ')}`;
+  });
+
+  protected readonly containerClass = computed(() => {
+    const variant = this.variant();
+    return cn(
+      'inline-flex items-center',
+      variant === 'default' && 'gap-4',
+      variant === 'compact' && 'gap-1',
+      variant === 'cards' && 'gap-3',
+      this.classInput(),
+    );
+  });
+
+  protected readonly unitClass = computed(() => {
+    const variant = this.variant();
+    return cn(
+      'flex flex-col items-center',
+      variant === 'cards' && 'bg-muted rounded-lg p-3 min-w-[70px]',
+    );
+  });
+
+  protected readonly valueClass = computed(() => {
+    const variant = this.variant();
+    return cn(
+      'font-mono font-bold tabular-nums',
+      variant === 'default' && 'text-4xl',
+      variant === 'compact' && 'text-2xl',
+      variant === 'cards' && 'text-3xl',
+    );
+  });
+
+  protected readonly labelClass = computed(() => {
+    const variant = this.variant();
+    return cn(
+      'text-muted-foreground',
+      variant === 'default' && 'text-sm',
+      variant === 'compact' && 'text-xs',
+      variant === 'cards' && 'text-xs uppercase tracking-wider',
+    );
+  });
+
+  protected readonly separatorClass = computed(() => {
+    const variant = this.variant();
+    return cn(
+      'font-bold text-muted-foreground',
+      variant === 'default' && 'text-4xl -mt-5',
+      variant === 'compact' && 'text-2xl -mt-3',
+      variant === 'cards' && 'text-3xl -mt-5',
+    );
+  });
+
+  padNumber(n: number): string {
+    return n.toString().padStart(2, '0');
+  }
+
+  private calculateTime(): CountdownTime {
+    const now = Date.now();
+    const target = this.targetDate().getTime();
+    const total = Math.max(0, target - now);
+
+    const seconds = Math.floor((total / 1000) % 60);
+    const minutes = Math.floor((total / 1000 / 60) % 60);
+    const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
+    const days = Math.floor(total / (1000 * 60 * 60 * 24));
+
+    return { days, hours, minutes, seconds, total };
+  }
+
+  private updateTime(): void {
+    const newTime = this.calculateTime();
+    this.time.set(newTime);
+    this.tick.emit(newTime);
+
+    if (newTime.total <= 0 && !this.isComplete) {
+      this.isComplete = true;
+      this.complete.emit();
+      this.stop();
+    }
+  }
+
+  start(): void {
+    this.stop();
+    this.isComplete = false;
+    this.updateTime();
+    this.intervalId = setInterval(() => this.updateTime(), 1000);
+  }
+
+  stop(): void {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+  }
+
+  reset(): void {
+    this.isComplete = false;
+    this.updateTime();
+  }
+
+  getTime(): CountdownTime {
+    return this.time();
+  }
+
+  isRunning(): boolean {
+    return this.intervalId !== null;
+  }
+}

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

@@ -0,0 +1,3 @@
+export { ScCountdown } from './countdown';
+export { ScCountdownSimple } from './countdown-simple';
+export type { CountdownTime } from './countdown';