@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/sortable-list/sortable-handle.ts

@@ -0,0 +1,72 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_SORTABLE_LIST, ScSortableList } from './sortable-list';
+import { SC_SORTABLE_ITEM, ScSortableItem } from './sortable-item';
+
+@Component({
+  selector: '[sc-sortable-handle]',
+  template: `
+    <ng-content>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        class="size-4"
+      >
+        <circle cx="9" cy="5" r="1" />
+        <circle cx="9" cy="12" r="1" />
+        <circle cx="9" cy="19" r="1" />
+        <circle cx="15" cy="5" r="1" />
+        <circle cx="15" cy="12" r="1" />
+        <circle cx="15" cy="19" r="1" />
+      </svg>
+    </ng-content>
+  `,
+  host: {
+    'data-slot': 'sortable-handle',
+    '[class]': 'class()',
+    draggable: 'true',
+    '[attr.aria-label]': '"Drag to reorder"',
+    '(dragstart)': 'onDragStart($event)',
+    '(mousedown)': 'onMouseDown()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScSortableHandle {
+  private readonly item = inject<ScSortableItem<unknown>>(SC_SORTABLE_ITEM);
+  private readonly list = inject<ScSortableList<unknown>>(SC_SORTABLE_LIST);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'cursor-grab active:cursor-grabbing',
+      'text-muted-foreground hover:text-foreground',
+      'touch-none',
+      this.classInput(),
+    ),
+  );
+
+  onDragStart(event: DragEvent): void {
+    event.stopPropagation();
+    this.list.startDrag(this.item.index());
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move';
+      event.dataTransfer.setData('text/plain', String(this.item.index()));
+    }
+  }
+
+  onMouseDown(): void {
+    // Prepare for potential drag
+  }
+}

package/src/lib/components/sortable-list/sortable-item.ts

@@ -0,0 +1,162 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  InjectionToken,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_SORTABLE_LIST, ScSortableList } from './sortable-list';
+
+// Token for sortable item context
+export const SC_SORTABLE_ITEM = new InjectionToken<ScSortableItem<unknown>>(
+  'SC_SORTABLE_ITEM',
+);
+
+@Component({
+  selector: '[sc-sortable-item]',
+  template: `
+    <ng-content />
+  `,
+  providers: [{ provide: SC_SORTABLE_ITEM, useExisting: ScSortableItem }],
+  host: {
+    'data-slot': 'sortable-item',
+    '[class]': 'class()',
+    '[attr.draggable]': 'canDrag()',
+    '[attr.data-dragging]': 'isBeingDragged() || null',
+    '[attr.data-drag-over]': 'isDragOver() || null',
+    '[attr.tabindex]': 'list.disabled() ? -1 : 0',
+    '(dragstart)': 'onDragStart($event)',
+    '(dragend)': 'onDragEnd($event)',
+    '(dragover)': 'onDragOver($event)',
+    '(dragenter)': 'onDragEnter($event)',
+    '(dragleave)': 'onDragLeave($event)',
+    '(drop)': 'onDrop($event)',
+    '(keydown)': 'onKeydown($event)',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScSortableItem<T> {
+  readonly list = inject<ScSortableList<T>>(SC_SORTABLE_LIST);
+  private readonly elementRef = inject(ElementRef<HTMLElement>);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly index = input.required<number>();
+  readonly item = input.required<T>();
+
+  protected readonly class = computed(() =>
+    cn(
+      'relative select-none',
+      'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md',
+      'data-[dragging]:opacity-50 data-[dragging]:z-50',
+      'data-[drag-over]:ring-2 data-[drag-over]:ring-primary',
+      'transition-[box-shadow,opacity]',
+      this.classInput(),
+    ),
+  );
+
+  protected readonly canDrag = computed(() => {
+    if (this.list.disabled()) return false;
+    return !this.list.handleOnly();
+  });
+
+  protected readonly isBeingDragged = computed(
+    () => this.list.draggedIndex() === this.index(),
+  );
+
+  protected readonly isDragOver = computed(() => {
+    const dragOverIdx = this.list.dragOverIndex();
+    const draggedIdx = this.list.draggedIndex();
+    return dragOverIdx === this.index() && draggedIdx !== this.index();
+  });
+
+  // Allow handle to trigger drag
+  startDragFromHandle(): void {
+    this.list.startDrag(this.index());
+  }
+
+  onDragStart(event: DragEvent): void {
+    if (this.list.handleOnly()) {
+      // If handleOnly, prevent default drag unless triggered from handle
+      event.preventDefault();
+      return;
+    }
+    this.list.startDrag(this.index());
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move';
+      event.dataTransfer.setData('text/plain', String(this.index()));
+    }
+  }
+
+  onDragEnd(event: DragEvent): void {
+    event.preventDefault();
+    this.list.endDrag();
+  }
+
+  onDragOver(event: DragEvent): void {
+    event.preventDefault();
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = 'move';
+    }
+  }
+
+  onDragEnter(event: DragEvent): void {
+    event.preventDefault();
+    this.list.setDragOver(this.index());
+  }
+
+  onDragLeave(event: DragEvent): void {
+    // Only clear if leaving to outside
+    const rect = this.elementRef.nativeElement.getBoundingClientRect();
+    if (
+      event.clientX < rect.left ||
+      event.clientX > rect.right ||
+      event.clientY < rect.top ||
+      event.clientY > rect.bottom
+    ) {
+      // Check if related target is not a child
+      const related = event.relatedTarget as HTMLElement;
+      if (!this.elementRef.nativeElement.contains(related)) {
+        this.list.setDragOver(null);
+      }
+    }
+  }
+
+  onDrop(event: DragEvent): void {
+    event.preventDefault();
+    this.list.endDrag();
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    if (this.list.disabled()) return;
+
+    const isVertical = this.list.orientation() === 'vertical';
+
+    if (
+      (isVertical && event.key === 'ArrowUp') ||
+      (!isVertical && event.key === 'ArrowLeft')
+    ) {
+      event.preventDefault();
+      this.list.moveUp(this.index());
+      this.focusSelf();
+    } else if (
+      (isVertical && event.key === 'ArrowDown') ||
+      (!isVertical && event.key === 'ArrowRight')
+    ) {
+      event.preventDefault();
+      this.list.moveDown(this.index());
+      this.focusSelf();
+    }
+  }
+
+  private focusSelf(): void {
+    // Re-focus after move (item might have moved in DOM)
+    requestAnimationFrame(() => {
+      this.elementRef.nativeElement.focus();
+    });
+  }
+}

package/src/lib/components/sortable-list/sortable-list.ts

@@ -0,0 +1,127 @@
+import {
+  computed,
+  Directive,
+  InjectionToken,
+  input,
+  model,
+  output,
+  signal,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+export interface SortableEvent<T> {
+  item: T;
+  previousIndex: number;
+  currentIndex: number;
+}
+
+// Token for sortable list context
+export const SC_SORTABLE_LIST = new InjectionToken<ScSortableList<unknown>>(
+  'SC_SORTABLE_LIST',
+);
+
+@Directive({
+  selector: '[sc-sortable-list]',
+  exportAs: 'scSortableList',
+  providers: [{ provide: SC_SORTABLE_LIST, useExisting: ScSortableList }],
+  host: {
+    'data-slot': 'sortable-list',
+    '[class]': 'class()',
+    '[attr.data-orientation]': 'orientation()',
+    '[attr.data-disabled]': 'disabled() || null',
+    '[attr.data-dragging]': 'isDragging() || null',
+  },
+})
+export class ScSortableList<T> {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly items = model<T[]>([]);
+  readonly orientation = input<'vertical' | 'horizontal'>('vertical');
+  readonly disabled = input<boolean>(false);
+  readonly handleOnly = input<boolean>(false);
+
+  readonly sortChange = output<SortableEvent<T>>();
+  readonly sortStart = output<{ item: T; index: number }>();
+  readonly sortEnd = output<SortableEvent<T>>();
+
+  readonly isDragging = signal(false);
+  readonly draggedIndex = signal<number | null>(null);
+  readonly dragOverIndex = signal<number | null>(null);
+
+  protected readonly class = computed(() =>
+    cn(
+      'relative',
+      this.orientation() === 'vertical' && 'flex flex-col',
+      this.orientation() === 'horizontal' && 'flex flex-row',
+      this.classInput(),
+    ),
+  );
+
+  private registeredItems: { index: number; element: HTMLElement }[] = [];
+
+  registerItem(index: number, element: HTMLElement): void {
+    this.registeredItems.push({ index, element });
+  }
+
+  unregisterItem(index: number): void {
+    this.registeredItems = this.registeredItems.filter(
+      (item) => item.index !== index,
+    );
+  }
+
+  startDrag(index: number): void {
+    if (this.disabled()) return;
+    this.isDragging.set(true);
+    this.draggedIndex.set(index);
+    this.sortStart.emit({ item: this.items()[index], index });
+  }
+
+  endDrag(): void {
+    const draggedIdx = this.draggedIndex();
+    const overIdx = this.dragOverIndex();
+
+    if (draggedIdx !== null && overIdx !== null && draggedIdx !== overIdx) {
+      this.moveItem(draggedIdx, overIdx);
+    }
+
+    this.isDragging.set(false);
+    this.draggedIndex.set(null);
+    this.dragOverIndex.set(null);
+  }
+
+  setDragOver(index: number | null): void {
+    if (this.isDragging()) {
+      this.dragOverIndex.set(index);
+    }
+  }
+
+  moveItem(fromIndex: number, toIndex: number): void {
+    if (this.disabled()) return;
+
+    const items = [...this.items()];
+    const [removed] = items.splice(fromIndex, 1);
+    items.splice(toIndex, 0, removed);
+
+    this.items.set(items);
+
+    const event: SortableEvent<T> = {
+      item: removed,
+      previousIndex: fromIndex,
+      currentIndex: toIndex,
+    };
+
+    this.sortChange.emit(event);
+    this.sortEnd.emit(event);
+  }
+
+  moveUp(index: number): void {
+    if (index > 0) {
+      this.moveItem(index, index - 1);
+    }
+  }
+
+  moveDown(index: number): void {
+    if (index < this.items().length - 1) {
+      this.moveItem(index, index + 1);
+    }
+  }
+}

package/src/lib/components/sortable-list/sortable-overlay.ts

@@ -0,0 +1,31 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  ViewEncapsulation,
+} from '@angular/core';
+import { SC_SORTABLE_LIST, ScSortableList } from './sortable-list';
+
+@Component({
+  selector: '[sc-sortable-overlay]',
+  template: `
+    @if (list.isDragging()) {
+      <div
+        class="fixed inset-0 z-40 cursor-grabbing"
+        (dragover)="onDragOver($event)"
+      ></div>
+    }
+  `,
+  host: {
+    'data-slot': 'sortable-overlay',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScSortableOverlay {
+  readonly list = inject<ScSortableList<unknown>>(SC_SORTABLE_LIST);
+
+  onDragOver(event: DragEvent): void {
+    event.preventDefault();
+  }
+}

package/src/lib/components/speed-dial/README.md

@@ -0,0 +1,259 @@
+# Speed Dial
+
+A floating action button (FAB) that expands to reveal a set of related actions.
+
+## Installation
+
+Import the components from the speed-dial module:
+
+```typescript
+import { ScSpeedDial, ScSpeedDialAction } from '@/ui/speed-dial';
+import type { SpeedDialAction, SpeedDialDirection } from '@/ui/speed-dial';
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<sc-speed-dial [actions]="actions" (actionClick)="onActionClick($event)" />
+```
+
+```typescript
+actions: SpeedDialAction[] = [
+  {
+    id: 'edit',
+    icon: '<svg>...</svg>',
+    label: 'Edit',
+  },
+  {
+    id: 'delete',
+    icon: '<svg>...</svg>',
+    label: 'Delete',
+  },
+];
+
+onActionClick(event: SpeedDialActionClickEvent): void {
+  console.log('Action clicked:', event.action.label);
+}
+```
+
+### Direction Options
+
+```html
+<!-- Expand upward (default) -->
+<sc-speed-dial [actions]="actions" direction="up" />
+
+<!-- Expand downward -->
+<sc-speed-dial [actions]="actions" direction="down" />
+
+<!-- Expand to the left -->
+<sc-speed-dial [actions]="actions" direction="left" />
+
+<!-- Expand to the right -->
+<sc-speed-dial [actions]="actions" direction="right" />
+```
+
+### Custom Icons
+
+```html
+<sc-speed-dial [actions]="actions" [icon]="customIcon" [closeIcon]="customCloseIcon" />
+```
+
+### Size Variants
+
+```html
+<!-- Small -->
+<sc-speed-dial [actions]="actions" size="sm" actionSize="sm" />
+
+<!-- Medium (default) -->
+<sc-speed-dial [actions]="actions" size="md" actionSize="md" />
+
+<!-- Large -->
+<sc-speed-dial [actions]="actions" size="lg" actionSize="lg" />
+```
+
+### Without Labels
+
+```html
+<sc-speed-dial [actions]="actions" [showLabels]="false" />
+```
+
+### Controlled Open State
+
+```html
+<sc-speed-dial [actions]="actions" [(open)]="isOpen" (openChange)="onOpenChange($event)" />
+```
+
+### Positioning
+
+The Speed Dial component uses inline positioning by default. For fixed or floating positioning, wrap it in a positioned container:
+
+```html
+<!-- Fixed bottom-right position -->
+<div class="fixed bottom-6 right-6 z-50">
+  <sc-speed-dial [actions]="actions" />
+</div>
+
+<!-- Absolute within container -->
+<div class="relative h-96">
+  <div class="absolute bottom-4 right-4">
+    <sc-speed-dial [actions]="actions" />
+  </div>
+</div>
+```
+
+## API Reference
+
+### ScSpeedDial
+
+The main speed dial component with floating action button.
+
+#### Inputs
+
+| Input                 | Type                                  | Default          | Description                   |
+| --------------------- | ------------------------------------- | ---------------- | ----------------------------- |
+| `actions`             | `SpeedDialAction[]`                   | `[]`             | Array of action items         |
+| `direction`           | `'up' \| 'down' \| 'left' \| 'right'` | `'up'`           | Direction to expand actions   |
+| `icon`                | `string`                              | Plus icon        | SVG icon for closed state     |
+| `closeIcon`           | `string`                              | X icon           | SVG icon for open state       |
+| `label`               | `string`                              | `'Open actions'` | Label for the main button     |
+| `ariaLabel`           | `string`                              | `'Speed dial'`   | Accessible label              |
+| `showLabels`          | `boolean`                             | `true`           | Show action labels            |
+| `closeOnActionClick`  | `boolean`                             | `true`           | Close menu after action click |
+| `closeOnOutsideClick` | `boolean`                             | `true`           | Close menu on outside click   |
+| `size`                | `'sm' \| 'md' \| 'lg'`                | `'md'`           | Size of main FAB button       |
+| `actionSize`          | `'sm' \| 'md' \| 'lg'`                | `'md'`           | Size of action buttons        |
+| `class`               | `string`                              | `''`             | Additional CSS classes        |
+
+#### Two-way Bindings
+
+| Binding | Type      | Description               |
+| ------- | --------- | ------------------------- |
+| `open`  | `boolean` | Open/closed state of menu |
+
+#### Outputs
+
+| Output        | Type                        | Description                     |
+| ------------- | --------------------------- | ------------------------------- |
+| `actionClick` | `SpeedDialActionClickEvent` | Emitted when action is clicked  |
+| `openChange`  | `boolean`                   | Emitted when open state changes |
+
+#### Public Methods
+
+| Method     | Description       |
+| ---------- | ----------------- |
+| `toggle()` | Toggle open state |
+| `close()`  | Close the menu    |
+
+### ScSpeedDialAction
+
+Individual action button component (used internally).
+
+#### Inputs
+
+| Input          | Type                   | Default | Description               |
+| -------------- | ---------------------- | ------- | ------------------------- |
+| `icon`         | `string` (required)    | -       | SVG icon string           |
+| `label`        | `string` (required)    | -       | Action label              |
+| `disabled`     | `boolean`              | `false` | Disable the action        |
+| `ariaLabel`    | `string`               | -       | Custom accessible label   |
+| `showLabel`    | `boolean`              | `true`  | Show label next to action |
+| `labelVisible` | `boolean`              | `true`  | Label visibility state    |
+| `size`         | `'sm' \| 'md' \| 'lg'` | `'md'`  | Button size               |
+
+## Type Definitions
+
+### SpeedDialAction
+
+```typescript
+interface SpeedDialAction {
+  id: string;
+  icon: string;
+  label: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+}
+```
+
+### SpeedDialActionClickEvent
+
+```typescript
+interface SpeedDialActionClickEvent {
+  action: SpeedDialAction;
+  index: number;
+}
+```
+
+### SpeedDialDirection
+
+```typescript
+type SpeedDialDirection = 'up' | 'down' | 'left' | 'right';
+```
+
+## Accessibility
+
+The Speed Dial component follows accessibility best practices:
+
+- Main button has `aria-expanded` indicating open/closed state
+- Main button has `aria-haspopup="true"` indicating a menu
+- Actions menu has `role="menu"` for screen readers
+- Each action has `aria-label` for clear identification
+- Pressing Escape closes the menu
+- Labels provide visual context and appear as tooltips
+- Disabled actions are properly indicated
+
+## Keyboard Navigation
+
+| Key    | Action                     |
+| ------ | -------------------------- |
+| Enter  | Toggle menu / Click action |
+| Space  | Toggle menu / Click action |
+| Escape | Close menu                 |
+
+## Styling
+
+The component uses Tailwind CSS classes and supports theming through CSS variables:
+
+- `--primary` / `--primary-foreground`: Main FAB colors
+- `--secondary` / `--secondary-foreground`: Action button colors
+- `--popover` / `--popover-foreground`: Label colors
+- `--ring`: Focus ring color
+
+### Custom Styling
+
+```html
+<sc-speed-dial [actions]="actions" class="[&_button]:bg-blue-500" />
+```
+
+## Animation
+
+The Speed Dial features smooth animations:
+
+- Main FAB has shadow transition on hover
+- Actions animate with opacity, scale, and position
+- Staggered reveal based on action index
+- Configurable transition timing
+
+## Features
+
+- Floating action button with expandable menu
+- Four expansion directions (up, down, left, right)
+- Customizable main button and close icons
+- Three size variants for flexibility
+- Optional action labels with tooltips
+- Support for disabled actions
+- Auto-close on action click or outside click
+- Escape key to close
+- Smooth staggered animations
+- Full keyboard and screen reader support
+- Responsive and mobile-friendly
+
+## Use Cases
+
+- Quick actions toolbar
+- Social sharing buttons
+- Add/create menus
+- Navigation shortcuts
+- Contact options
+- Settings quick access

package/src/lib/components/speed-dial/index.ts

@@ -0,0 +1,7 @@
+export { ScSpeedDial } from './speed-dial';
+export { ScSpeedDialAction } from './speed-dial-action';
+export type {
+  SpeedDialAction,
+  SpeedDialActionClickEvent,
+  SpeedDialDirection,
+} from './speed-dial-types';