@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/confetti/confetti.ts

@@ -0,0 +1,220 @@
+import {
+  afterNextRender,
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  ElementRef,
+  inject,
+  input,
+  output,
+  signal,
+  viewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import type {
+  ConfettiOptions,
+  ConfettiParticle,
+  ConfettiShape,
+} from './confetti-types';
+import { DEFAULT_CONFETTI_OPTIONS } from './confetti-types';
+
+@Component({
+  selector: 'sc-confetti',
+  template: `
+    <canvas
+      #canvas
+      class="pointer-events-none fixed inset-0 z-50"
+      [width]="canvasWidth()"
+      [height]="canvasHeight()"
+      [class.hidden]="!isActive()"
+    ></canvas>
+  `,
+  styles: `
+    :host {
+      display: contents;
+    }
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScConfetti {
+  private readonly destroyRef = inject(DestroyRef);
+  readonly canvasRef = viewChild<ElementRef<HTMLCanvasElement>>('canvas');
+
+  readonly options = input<ConfettiOptions>({});
+
+  readonly complete = output<void>();
+
+  protected readonly isActive = signal(false);
+  protected readonly canvasWidth = signal(0);
+  protected readonly canvasHeight = signal(0);
+
+  private particles: ConfettiParticle[] = [];
+  private animationId: number | null = null;
+  private ctx: CanvasRenderingContext2D | null = null;
+
+  constructor() {
+    afterNextRender(() => {
+      this.updateCanvasSize();
+      this.setupResizeHandler();
+    });
+  }
+
+  private updateCanvasSize(): void {
+    this.canvasWidth.set(window.innerWidth);
+    this.canvasHeight.set(window.innerHeight);
+  }
+
+  private setupResizeHandler(): void {
+    const handler = () => this.updateCanvasSize();
+    window.addEventListener('resize', handler);
+    this.destroyRef.onDestroy(() => {
+      window.removeEventListener('resize', handler);
+      this.stop();
+    });
+  }
+
+  fire(customOptions?: ConfettiOptions): void {
+    const opts = {
+      ...DEFAULT_CONFETTI_OPTIONS,
+      ...this.options(),
+      ...customOptions,
+    };
+    this.createParticles(opts);
+    this.isActive.set(true);
+    this.startAnimation(opts);
+  }
+
+  fireFromElement(element: HTMLElement, customOptions?: ConfettiOptions): void {
+    const rect = element.getBoundingClientRect();
+    const origin = {
+      x: (rect.left + rect.width / 2) / window.innerWidth,
+      y: (rect.top + rect.height / 2) / window.innerHeight,
+    };
+    this.fire({ ...customOptions, origin });
+  }
+
+  stop(): void {
+    if (this.animationId !== null) {
+      cancelAnimationFrame(this.animationId);
+      this.animationId = null;
+    }
+    this.particles = [];
+    this.isActive.set(false);
+    this.clearCanvas();
+  }
+
+  private createParticles(opts: Required<ConfettiOptions>): void {
+    this.particles = [];
+    const originX = opts.origin.x * this.canvasWidth();
+    const originY = opts.origin.y * this.canvasHeight();
+
+    for (let i = 0; i < opts.particleCount; i++) {
+      const angle =
+        (Math.random() * opts.spread - opts.spread / 2) * (Math.PI / 180);
+      const velocity = opts.startVelocity * (0.5 + Math.random() * 0.5);
+
+      this.particles.push({
+        x: originX,
+        y: originY,
+        vx: Math.sin(angle) * velocity + opts.drift,
+        vy: -Math.cos(angle) * velocity,
+        color: opts.colors[Math.floor(Math.random() * opts.colors.length)],
+        size: 8 + Math.random() * 8,
+        rotation: Math.random() * 360,
+        rotationSpeed: (Math.random() - 0.5) * 10,
+        shape: opts.shapes[Math.floor(Math.random() * opts.shapes.length)],
+      });
+    }
+  }
+
+  private startAnimation(opts: Required<ConfettiOptions>): void {
+    const canvas = this.canvasRef()?.nativeElement;
+    if (!canvas) return;
+
+    this.ctx = canvas.getContext('2d');
+    if (!this.ctx) return;
+
+    const startTime = performance.now();
+
+    const animate = (currentTime: number) => {
+      const elapsed = currentTime - startTime;
+
+      if (elapsed >= opts.duration || this.particles.length === 0) {
+        this.stop();
+        this.complete.emit();
+        return;
+      }
+
+      this.updateParticles(opts);
+      this.drawParticles();
+
+      this.animationId = requestAnimationFrame(animate);
+    };
+
+    this.animationId = requestAnimationFrame(animate);
+  }
+
+  private updateParticles(opts: Required<ConfettiOptions>): void {
+    const height = this.canvasHeight();
+
+    this.particles = this.particles.filter((p) => {
+      p.x += p.vx;
+      p.y += p.vy;
+      p.vy += opts.gravity * 0.5;
+      p.vx *= opts.decay;
+      p.vy *= opts.decay;
+      p.rotation += p.rotationSpeed;
+
+      return p.y < height + 50;
+    });
+  }
+
+  private drawParticles(): void {
+    if (!this.ctx) return;
+
+    this.clearCanvas();
+
+    for (const p of this.particles) {
+      this.ctx.save();
+      this.ctx.translate(p.x, p.y);
+      this.ctx.rotate((p.rotation * Math.PI) / 180);
+      this.ctx.fillStyle = p.color;
+
+      this.drawShape(p.shape, p.size);
+
+      this.ctx.restore();
+    }
+  }
+
+  private drawShape(shape: ConfettiShape, size: number): void {
+    if (!this.ctx) return;
+
+    switch (shape) {
+      case 'square':
+        this.ctx.fillRect(-size / 2, -size / 2, size, size);
+        break;
+      case 'circle':
+        this.ctx.beginPath();
+        this.ctx.arc(0, 0, size / 2, 0, Math.PI * 2);
+        this.ctx.fill();
+        break;
+      case 'triangle':
+        this.ctx.beginPath();
+        this.ctx.moveTo(0, -size / 2);
+        this.ctx.lineTo(size / 2, size / 2);
+        this.ctx.lineTo(-size / 2, size / 2);
+        this.ctx.closePath();
+        this.ctx.fill();
+        break;
+      case 'ribbon':
+        this.ctx.fillRect(-size / 4, -size, size / 2, size * 2);
+        break;
+    }
+  }
+
+  private clearCanvas(): void {
+    if (!this.ctx) return;
+    this.ctx.clearRect(0, 0, this.canvasWidth(), this.canvasHeight());
+  }
+}

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

@@ -0,0 +1,7 @@
+export { ScConfetti } from './confetti';
+export type {
+  ConfettiOptions,
+  ConfettiParticle,
+  ConfettiShape,
+} from './confetti-types';
+export { DEFAULT_CONFETTI_OPTIONS } from './confetti-types';

package/src/lib/components/context-menu/README.md

@@ -0,0 +1,149 @@
+# Context Menu Components
+
+Displays a menu at the pointer position when triggered by a right-click.
+
+## Architecture
+
+```
+ScContextMenu (Root)
+    ├── open: signal<boolean>
+    ├── position: signal<{x, y}>
+    │
+    ├── ScContextMenuTrigger (wraps any element)
+    │     └── Listens to contextmenu event
+    │
+    └── ScContextMenuContent (ng-template)
+          ├── Uses CDK Overlay at mouse position
+          │
+          ├── ScContextMenuLabel
+          ├── ScContextMenuItem
+          │     └── ScContextMenuShortcut
+          ├── ScContextMenuSeparator
+          │
+          └── ScContextMenuSub
+                ├── ScContextMenuSubTrigger
+                └── ScContextMenuSubContent
+```
+
+## Components
+
+| Component                 | Selector                           | Description                          |
+| ------------------------- | ---------------------------------- | ------------------------------------ |
+| `ScContextMenu`           | `div[sc-context-menu]`             | Root wrapper with overlay management |
+| `ScContextMenuTrigger`    | `[sc-context-menu-trigger]`        | Element that triggers on right-click |
+| `ScContextMenuContent`    | `<sc-context-menu-content>`        | Menu content container               |
+| `ScContextMenuItem`       | `[sc-context-menu-item]`           | Individual menu item                 |
+| `ScContextMenuLabel`      | `[sc-context-menu-label]`          | Label for grouping items             |
+| `ScContextMenuSeparator`  | `[sc-context-menu-separator]`      | Visual separator                     |
+| `ScContextMenuShortcut`   | `[sc-context-menu-shortcut]`       | Keyboard shortcut display            |
+| `ScContextMenuSub`        | `div[sc-context-menu-sub]`         | Submenu wrapper                      |
+| `ScContextMenuSubTrigger` | `div[sc-context-menu-sub-trigger]` | Submenu trigger                      |
+| `ScContextMenuSubContent` | `div[sc-context-menu-sub-content]` | Submenu content                      |
+
+## Usage
+
+### Basic Context Menu
+
+```html
+<div sc-context-menu>
+  <div sc-context-menu-trigger class="h-32 w-64 border border-dashed">Right click here</div>
+
+  <sc-context-menu-content>
+    <div sc-context-menu-item (select)="onCut()">
+      Cut
+      <span sc-context-menu-shortcut>⌘X</span>
+    </div>
+    <div sc-context-menu-item (select)="onCopy()">
+      Copy
+      <span sc-context-menu-shortcut>⌘C</span>
+    </div>
+    <div sc-context-menu-item (select)="onPaste()">
+      Paste
+      <span sc-context-menu-shortcut>⌘V</span>
+    </div>
+  </sc-context-menu-content>
+</div>
+```
+
+### With Labels and Separators
+
+```html
+<sc-context-menu-content>
+  <span sc-context-menu-label>Edit</span>
+  <div sc-context-menu-separator></div>
+  <div sc-context-menu-item>Cut</div>
+  <div sc-context-menu-item>Copy</div>
+  <div sc-context-menu-item>Paste</div>
+</sc-context-menu-content>
+```
+
+### With Submenu
+
+```html
+<sc-context-menu-content>
+  <div sc-context-menu-item>Back</div>
+  <div sc-context-menu-item>Forward</div>
+
+  <div sc-context-menu-sub>
+    <div sc-context-menu-sub-trigger>More Tools</div>
+    <div sc-context-menu-sub-content>
+      <div sc-context-menu-item>Save Page As...</div>
+      <div sc-context-menu-item>Create Shortcut...</div>
+      <div sc-context-menu-item>Developer Tools</div>
+    </div>
+  </div>
+</sc-context-menu-content>
+```
+
+### With Disabled Items
+
+```html
+<div sc-context-menu-item [disabled]="true">Disabled Item</div>
+```
+
+## Inputs
+
+### ScContextMenuItem
+
+| Input           | Type      | Default | Description                     |
+| --------------- | --------- | ------- | ------------------------------- |
+| `disabled`      | `boolean` | `false` | Whether the item is disabled    |
+| `closeOnSelect` | `boolean` | `true`  | Whether to close menu on select |
+
+### ScContextMenuLabel
+
+| Input   | Type      | Default | Description                          |
+| ------- | --------- | ------- | ------------------------------------ |
+| `inset` | `boolean` | `false` | Add left padding to align with items |
+
+## Outputs
+
+### ScContextMenuItem
+
+| Output   | Type   | Description                   |
+| -------- | ------ | ----------------------------- |
+| `select` | `void` | Emitted when item is selected |
+
+## Features
+
+- **Right-click triggered**: Opens at mouse cursor position
+- **Backdrop dismiss**: Clicking outside closes the menu
+- **Escape key**: Closes the menu
+- **Submenu support**: Nested menus with hover trigger
+- **Keyboard shortcuts**: Display keyboard shortcuts with `sc-context-menu-shortcut`
+- **Disabled items**: Support for disabled menu items
+
+## Accessibility
+
+- Uses `role="menu"` and `role="menuitem"`
+- `aria-haspopup` and `aria-expanded` on submenu triggers
+- `tabindex="-1"` on menu items for focus management
+- Escape key closes the menu
+
+## Differences from Regular Menu
+
+| Feature  | Context Menu       | Menu                |
+| -------- | ------------------ | ------------------- |
+| Trigger  | Right-click        | Click on button     |
+| Position | At mouse cursor    | Attached to trigger |
+| Use case | Contextual actions | Dropdown menus      |

package/src/lib/components/context-menu/context-menu-content.ts

@@ -0,0 +1,46 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  TemplateRef,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScContextMenu } from './context-menu';
+
+@Component({
+  selector: 'sc-context-menu-content',
+  template: `
+    <ng-template #contentTemplate>
+      <div [class]="class()" role="menu" (keydown)="onKeydown($event)">
+        <ng-content />
+      </div>
+    </ng-template>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScContextMenuContent {
+  private readonly contextMenu = inject(ScContextMenu);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  @ViewChild('contentTemplate', { static: true })
+  templateRef!: TemplateRef<unknown>;
+
+  protected readonly class = computed(() =>
+    cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+      'animate-in fade-in-0 zoom-in-95',
+      this.classInput(),
+    ),
+  );
+
+  onKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      this.contextMenu.closeMenu();
+    }
+  }
+}

package/src/lib/components/context-menu/context-menu-item.ts

@@ -0,0 +1,44 @@
+import { computed, Directive, inject, input, output } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScContextMenu } from './context-menu';
+
+@Directive({
+  selector: '[sc-context-menu-item]',
+  host: {
+    'data-slot': 'context-menu-item',
+    role: 'menuitem',
+    tabindex: '-1',
+    '[class]': 'class()',
+    '[attr.data-disabled]': 'disabled() || null',
+    '(click)': 'onClick()',
+    '(keydown.enter)': 'onClick()',
+    '(keydown.space)': 'onClick()',
+  },
+})
+export class ScContextMenuItem {
+  private readonly contextMenu = inject(ScContextMenu);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly disabled = input<boolean>(false);
+  readonly closeOnSelect = input<boolean>(true);
+
+  readonly select = output<void>();
+
+  protected readonly class = computed(() =>
+    cn(
+      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none',
+      'focus:bg-accent focus:text-accent-foreground',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      '[&>svg]:size-4 [&>svg]:shrink-0',
+      this.classInput(),
+    ),
+  );
+
+  onClick(): void {
+    if (this.disabled()) return;
+    this.select.emit();
+    if (this.closeOnSelect()) {
+      this.contextMenu.closeMenu();
+    }
+  }
+}

package/src/lib/components/context-menu/context-menu-label.ts

@@ -0,0 +1,22 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: '[sc-context-menu-label]',
+  host: {
+    'data-slot': 'context-menu-label',
+    '[class]': 'class()',
+  },
+})
+export class ScContextMenuLabel {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly inset = input<boolean>(false);
+
+  protected readonly class = computed(() =>
+    cn(
+      'px-2 py-1.5 text-sm font-semibold',
+      this.inset() && 'pl-8',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/context-menu/context-menu-separator.ts

@@ -0,0 +1,18 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: '[sc-context-menu-separator]',
+  host: {
+    'data-slot': 'context-menu-separator',
+    role: 'separator',
+    '[class]': 'class()',
+  },
+})
+export class ScContextMenuSeparator {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('-mx-1 my-1 h-px bg-border', this.classInput()),
+  );
+}

package/src/lib/components/context-menu/context-menu-shortcut.ts

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: '[sc-context-menu-shortcut]',
+  host: {
+    'data-slot': 'context-menu-shortcut',
+    '[class]': 'class()',
+  },
+})
+export class ScContextMenuShortcut {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'ml-auto text-xs tracking-widest text-muted-foreground',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/context-menu/context-menu-sub-content.ts

@@ -0,0 +1,83 @@
+import { ConnectedPosition, OverlayModule } from '@angular/cdk/overlay';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScContextMenuSub } from './context-menu-sub';
+import { ScContextMenuSubTrigger } from './context-menu-sub-trigger';
+
+const positions: ConnectedPosition[] = [
+  {
+    originX: 'end',
+    originY: 'top',
+    overlayX: 'start',
+    overlayY: 'top',
+    offsetX: 4,
+  },
+  {
+    originX: 'start',
+    originY: 'top',
+    overlayX: 'end',
+    overlayY: 'top',
+    offsetX: -4,
+  },
+];
+
+@Component({
+  selector: 'div[sc-context-menu-sub-content]',
+  imports: [OverlayModule],
+  template: `
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="trigger.overlayOrigin"
+      [cdkConnectedOverlayOpen]="submenu.open()"
+      [cdkConnectedOverlayPositions]="positions"
+    >
+      <div
+        [class]="contentClass()"
+        role="menu"
+        (mouseenter)="onMouseEnter()"
+        (mouseleave)="onMouseLeave()"
+      >
+        <ng-content />
+      </div>
+    </ng-template>
+  `,
+  host: {
+    'data-slot': 'context-menu-sub-content',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScContextMenuSubContent {
+  readonly submenu = inject(ScContextMenuSub);
+  readonly trigger = inject(ScContextMenuSubTrigger);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly positions = positions;
+
+  protected readonly class = computed(() => cn('', this.classInput()));
+
+  protected readonly contentClass = computed(() =>
+    cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg',
+      this.submenu.open()
+        ? 'opacity-100 scale-100 transition-[opacity,transform] duration-150 ease-out'
+        : 'opacity-0 scale-95 transition-[opacity,transform] duration-150 ease-in',
+    ),
+  );
+
+  onMouseEnter(): void {
+    this.trigger.cancelHide();
+  }
+
+  onMouseLeave(): void {
+    this.submenu.hide();
+  }
+}