@semantic-components/ui-lab 0.62.0 → 0.63.0

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

@@ -0,0 +1,91 @@
+import { CdkOverlayOrigin } 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';
+
+@Component({
+  selector: 'div[sc-context-menu-sub-trigger]',
+  hostDirectives: [CdkOverlayOrigin],
+  template: `
+    <ng-content />
+    <svg
+      class="ml-auto size-4"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  `,
+  host: {
+    'data-slot': 'context-menu-sub-trigger',
+    role: 'menuitem',
+    'aria-haspopup': 'menu',
+    '[attr.aria-expanded]': 'submenu.open()',
+    '[attr.data-state]': 'submenu.open() ? "open" : "closed"',
+    '[class]': 'class()',
+    '(mouseenter)': 'onMouseEnter()',
+    '(mouseleave)': 'onMouseLeave()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScContextMenuSubTrigger {
+  readonly submenu = inject(ScContextMenuSub);
+  readonly overlayOrigin = inject(CdkOverlayOrigin);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  private showTimeout: ReturnType<typeof setTimeout> | null = null;
+  private hideTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  protected readonly class = computed(() =>
+    cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+      'focus:bg-accent focus:text-accent-foreground',
+      'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      this.classInput(),
+    ),
+  );
+
+  onMouseEnter(): void {
+    this.cancelHide();
+    this.showTimeout = setTimeout(() => {
+      this.submenu.show();
+    }, 100);
+  }
+
+  onMouseLeave(): void {
+    this.cancelShow();
+    this.hideTimeout = setTimeout(() => {
+      this.submenu.hide();
+    }, 100);
+  }
+
+  private cancelShow(): void {
+    if (this.showTimeout) {
+      clearTimeout(this.showTimeout);
+      this.showTimeout = null;
+    }
+  }
+
+  cancelHide(): void {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+      this.hideTimeout = null;
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-context-menu-sub]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'context-menu-sub',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScContextMenuSub {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  /** Whether the submenu is open */
+  readonly open = signal<boolean>(false);
+
+  protected readonly class = computed(() => cn('relative', this.classInput()));
+
+  show(): void {
+    this.open.set(true);
+  }
+
+  hide(): void {
+    this.open.set(false);
+  }
+}

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

@@ -0,0 +1,40 @@
+import {
+  computed,
+  contentChild,
+  Directive,
+  inject,
+  input,
+  TemplateRef,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScContextMenu } from './context-menu';
+import { ScContextMenuContent } from './context-menu-content';
+
+@Directive({
+  selector: '[sc-context-menu-trigger]',
+  host: {
+    'data-slot': 'context-menu-trigger',
+    '[class]': 'class()',
+    '(contextmenu)': 'onContextMenu($event)',
+  },
+})
+export class ScContextMenuTrigger {
+  private readonly contextMenu = inject(ScContextMenu);
+  private readonly contentChild = contentChild(ScContextMenuContent);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() => cn('', this.classInput()));
+
+  onContextMenu(event: MouseEvent): void {
+    event.preventDefault();
+    const content = this.contentChild();
+    if (content?.templateRef) {
+      this.contextMenu.openAt(
+        event.clientX,
+        event.clientY,
+        content.templateRef,
+      );
+    }
+  }
+}

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

@@ -0,0 +1,106 @@
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  inject,
+  input,
+  signal,
+  TemplateRef,
+  ViewContainerRef,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScContextMenuContent } from './context-menu-content';
+
+@Component({
+  selector: 'div[sc-context-menu]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'context-menu',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScContextMenu {
+  private readonly overlay = inject(Overlay);
+  private readonly viewContainerRef = inject(ViewContainerRef);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  /** Whether the context menu is open */
+  readonly open = signal<boolean>(false);
+
+  /** Position where the context menu should appear */
+  readonly position = signal<{ x: number; y: number }>({ x: 0, y: 0 });
+
+  private overlayRef: OverlayRef | null = null;
+  private contentChild = contentChild(ScContextMenuContent);
+
+  protected readonly class = computed(() => cn('relative', this.classInput()));
+
+  openAt(x: number, y: number, template: TemplateRef<unknown>): void {
+    this.closeMenu();
+
+    this.position.set({ x, y });
+
+    this.overlayRef = this.overlay.create({
+      positionStrategy: this.overlay
+        .position()
+        .flexibleConnectedTo({ x, y })
+        .withPositions([
+          {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+          },
+          {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+          },
+          {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top',
+          },
+          {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'bottom',
+          },
+        ]),
+      scrollStrategy: this.overlay.scrollStrategies.close(),
+      hasBackdrop: true,
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+    });
+
+    const portal = new TemplatePortal(template, this.viewContainerRef);
+    this.overlayRef.attach(portal);
+    this.open.set(true);
+
+    this.overlayRef.backdropClick().subscribe(() => this.closeMenu());
+    this.overlayRef.keydownEvents().subscribe((event) => {
+      if (event.key === 'Escape') {
+        this.closeMenu();
+      }
+    });
+  }
+
+  closeMenu(): void {
+    if (this.overlayRef) {
+      this.overlayRef.dispose();
+      this.overlayRef = null;
+    }
+    this.open.set(false);
+  }
+}

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

@@ -0,0 +1,10 @@
+export { ScContextMenu } from './context-menu';
+export { ScContextMenuContent } from './context-menu-content';
+export { ScContextMenuItem } from './context-menu-item';
+export { ScContextMenuLabel } from './context-menu-label';
+export { ScContextMenuSeparator } from './context-menu-separator';
+export { ScContextMenuShortcut } from './context-menu-shortcut';
+export { ScContextMenuSub } from './context-menu-sub';
+export { ScContextMenuSubContent } from './context-menu-sub-content';
+export { ScContextMenuSubTrigger } from './context-menu-sub-trigger';
+export { ScContextMenuTrigger } from './context-menu-trigger';

package/src/lib/components/copy-button/README.md

@@ -0,0 +1,211 @@
+# Copy Button
+
+A button component that copies text to clipboard with visual feedback.
+
+## Usage
+
+```html
+<button sc-copy-button [value]="textToCopy"></button>
+```
+
+## Components
+
+### ScCopyButton
+
+Core copy button with icon and feedback animation.
+
+**Selector:** `button[sc-copy-button]`
+
+**Inputs:**
+
+| Input      | Type                                  | Default   | Description            |
+| ---------- | ------------------------------------- | --------- | ---------------------- |
+| `value`    | `string`                              | Required  | Text to copy           |
+| `disabled` | `boolean`                             | `false`   | Disabled state         |
+| `timeout`  | `number`                              | `2000`    | Feedback duration (ms) |
+| `variant`  | `'default' \| 'ghost' \| 'outline'`   | `'ghost'` | Visual style           |
+| `size`     | `'sm' \| 'default' \| 'lg' \| 'icon'` | `'icon'`  | Button size            |
+| `class`    | `string`                              | `''`      | Additional CSS         |
+
+**Outputs:**
+
+| Output        | Type     | Description           |
+| ------------- | -------- | --------------------- |
+| `copySuccess` | `string` | Emits copied value    |
+| `copyError`   | `Error`  | Emits on copy failure |
+
+**Methods:**
+
+| Method    | Description           |
+| --------- | --------------------- |
+| `copy()`  | Trigger copy manually |
+| `reset()` | Reset copied state    |
+
+### ScCopyButtonWithText
+
+Copy button with text label.
+
+**Selector:** `[sc-copy-button-with-text]`
+
+**Inputs:**
+
+| Input        | Type                                | Default     | Description       |
+| ------------ | ----------------------------------- | ----------- | ----------------- |
+| `value`      | `string`                            | Required    | Text to copy      |
+| `disabled`   | `boolean`                           | `false`     | Disabled state    |
+| `timeout`    | `number`                            | `2000`      | Feedback duration |
+| `variant`    | `'default' \| 'ghost' \| 'outline'` | `'default'` | Visual style      |
+| `size`       | `'sm' \| 'default' \| 'lg'`         | `'default'` | Button size       |
+| `copyText`   | `string`                            | `'Copy'`    | Text before copy  |
+| `copiedText` | `string`                            | `'Copied!'` | Text after copy   |
+
+### ScCopyInput
+
+Input field with integrated copy button.
+
+**Selector:** `[sc-copy-input]`
+
+**Inputs:**
+
+| Input      | Type      | Default  | Description           |
+| ---------- | --------- | -------- | --------------------- |
+| `value`    | `string`  | Required | Value to display/copy |
+| `readonly` | `boolean` | `true`   | Input readonly state  |
+| `class`    | `string`  | `''`     | Additional CSS        |
+
+### ScCopyCode
+
+Code block with copy button.
+
+**Selector:** `[sc-copy-code]`
+
+**Inputs:**
+
+| Input   | Type     | Required | Description    |
+| ------- | -------- | -------- | -------------- |
+| `value` | `string` | Yes      | Code to copy   |
+| `class` | `string` | No       | Additional CSS |
+
+## Examples
+
+### Basic
+
+```html
+<button sc-copy-button [value]="'Hello, World!'"></button>
+```
+
+### With Event Handler
+
+```html
+<button sc-copy-button [value]="text" (copySuccess)="onCopied($event)" (copyError)="onError($event)"></button>
+```
+
+### Variants
+
+```html
+<button sc-copy-button [value]="text" variant="ghost"></button>
+<button sc-copy-button [value]="text" variant="outline"></button>
+<button sc-copy-button [value]="text" variant="default"></button>
+```
+
+### Sizes
+
+```html
+<button sc-copy-button [value]="text" size="sm"></button>
+<button sc-copy-button [value]="text" size="default"></button>
+<button sc-copy-button [value]="text" size="lg"></button>
+<button sc-copy-button [value]="text" size="icon"></button>
+```
+
+### With Text Label
+
+```html
+<div sc-copy-button-with-text [value]="'Copy this text'"></div>
+
+<div sc-copy-button-with-text [value]="shareLink" copyText="Copy Link" copiedText="Link Copied!"></div>
+```
+
+### Copy Input
+
+```html
+<div sc-copy-input [value]="'https://example.com/share/abc123'"></div>
+
+<div>
+  <label>API Key</label>
+  <div sc-copy-input [value]="apiKey"></div>
+</div>
+```
+
+### Copy Code Block
+
+```html
+<div sc-copy-code [value]="codeSnippet">{{ codeSnippet }}</div>
+```
+
+### Inline with Text
+
+```html
+<div class="flex items-center gap-2 border rounded-md px-3 py-2">
+  <code class="flex-1">npm install package</code>
+  <button sc-copy-button [value]="'npm install package'" size="sm"></button>
+</div>
+```
+
+### Custom Timeout
+
+```html
+<button sc-copy-button [value]="text" [timeout]="5000">Copy (5s feedback)</button>
+```
+
+### Disabled
+
+```html
+<button sc-copy-button [value]="text" [disabled]="true"></button>
+```
+
+### Share URL Pattern
+
+```html
+<div class="flex items-center gap-2">
+  <input [value]="shareUrl" readonly class="flex-1 border rounded px-3 py-2" />
+  <button sc-copy-button [value]="shareUrl" variant="outline"></button>
+</div>
+```
+
+### Color Code Pattern
+
+```html
+<div class="flex items-center gap-3">
+  <div class="size-10 rounded-md" [style.background]="color"></div>
+  <span class="flex-1">{{ color }}</span>
+  <button sc-copy-button [value]="color" variant="ghost"></button>
+</div>
+```
+
+### Promo Code Pattern
+
+```html
+<div class="flex items-center justify-between">
+  <code class="text-2xl font-bold">SAVE20</code>
+  <button sc-copy-button [value]="'SAVE20'" variant="outline">Copy Code</button>
+</div>
+```
+
+## Features
+
+- **Clipboard API**: Uses modern `navigator.clipboard.writeText()`
+- **Visual Feedback**: Icon changes to checkmark on success
+- **Configurable Timeout**: Control how long feedback shows
+- **Multiple Variants**: Ghost, outline, and default styles
+- **Multiple Sizes**: Small, default, large, and icon-only
+- **Convenience Components**: Input, code block, and text label wrappers
+- **Events**: Success and error callbacks
+- **Programmatic Control**: `copy()` and `reset()` methods
+
+## Accessibility
+
+- `aria-label` updates based on state
+- `data-copied` attribute for styling
+- Focus visible indicators
+- Disabled state support
+- Proper button semantics

package/src/lib/components/copy-button/copy-button-with-text.ts

@@ -0,0 +1,53 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScCopyButton } from './copy-button';
+
+@Component({
+  selector: '[sc-copy-button-with-text]',
+  template: `
+    <button
+      sc-copy-button
+      [value]="value()"
+      [disabled]="disabled()"
+      [timeout]="timeout()"
+      [variant]="variant()"
+      [size]="size()"
+      (copySuccess)="copySuccess.emit($event)"
+      (copyError)="copyError.emit($event)"
+      #copyBtn="scCopyButton"
+    >
+      {{ copyBtn.copied() ? copiedText() : copyText() }}
+    </button>
+  `,
+  host: {
+    'data-slot': 'copy-button-with-text',
+    '[class]': 'class()',
+  },
+  imports: [ScCopyButton],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScCopyButtonWithText {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly value = input.required<string>();
+  readonly disabled = input<boolean>(false);
+  readonly timeout = input<number>(2000);
+  readonly variant = input<'default' | 'ghost' | 'outline'>('default');
+  readonly size = input<'sm' | 'default' | 'lg'>('default');
+  readonly copyText = input<string>('Copy');
+  readonly copiedText = input<string>('Copied!');
+
+  readonly copySuccess = output<string>();
+  readonly copyError = output<Error>();
+
+  protected readonly class = computed(() =>
+    cn('inline-block', this.classInput()),
+  );
+}

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

@@ -0,0 +1,137 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'button[sc-copy-button]',
+  exportAs: 'scCopyButton',
+  template: `
+    @if (copied()) {
+      <!-- Check icon -->
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        [class]="iconClass()"
+        class="text-green-500"
+      >
+        <path d="M20 6 9 17l-5-5" />
+      </svg>
+    } @else {
+      <!-- Copy icon -->
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        [class]="iconClass()"
+      >
+        <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+        <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+      </svg>
+    }
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'copy-button',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': 'disabled()',
+    '[attr.data-copied]': 'copied() || null',
+    '[attr.aria-label]': 'ariaLabel()',
+    '(click)': 'copy()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScCopyButton {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly value = input.required<string>();
+  readonly disabled = input<boolean>(false);
+  readonly timeout = input<number>(2000);
+  readonly variant = input<'default' | 'ghost' | 'outline'>('ghost');
+  readonly size = input<'sm' | 'default' | 'lg' | 'icon'>('icon');
+
+  readonly copySuccess = output<string>();
+  readonly copyError = output<Error>();
+
+  readonly copied = signal(false);
+  private timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  protected readonly class = computed(() =>
+    cn(
+      'inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors',
+      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+      'disabled:pointer-events-none disabled:opacity-50',
+      // Variants
+      this.variant() === 'default' &&
+        'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+      this.variant() === 'ghost' &&
+        'hover:bg-accent hover:text-accent-foreground',
+      this.variant() === 'outline' &&
+        'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+      // Sizes
+      this.size() === 'sm' && 'h-8 px-3 text-xs',
+      this.size() === 'default' && 'h-9 px-4 py-2 text-sm',
+      this.size() === 'lg' && 'h-10 px-8 text-sm',
+      this.size() === 'icon' && 'size-9',
+      this.classInput(),
+    ),
+  );
+
+  protected readonly iconClass = computed(() =>
+    cn(
+      this.size() === 'sm' && 'size-3.5',
+      this.size() === 'default' && 'size-4',
+      this.size() === 'lg' && 'size-5',
+      this.size() === 'icon' && 'size-4',
+    ),
+  );
+
+  protected readonly ariaLabel = computed(() =>
+    this.copied() ? 'Copied to clipboard' : 'Copy to clipboard',
+  );
+
+  async copy(): Promise<void> {
+    if (this.disabled() || this.copied()) return;
+
+    try {
+      await navigator.clipboard.writeText(this.value());
+      this.copied.set(true);
+      this.copySuccess.emit(this.value());
+
+      // Clear any existing timeout
+      if (this.timeoutId) {
+        clearTimeout(this.timeoutId);
+      }
+
+      // Reset after timeout
+      this.timeoutId = setTimeout(() => {
+        this.copied.set(false);
+        this.timeoutId = null;
+      }, this.timeout());
+    } catch (error) {
+      this.copyError.emit(
+        error instanceof Error ? error : new Error('Failed to copy'),
+      );
+    }
+  }
+
+  reset(): void {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    }
+    this.copied.set(false);
+  }
+}