@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/scroll-area/scroll-bar.ts

@@ -0,0 +1,207 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  ElementRef,
+  inject,
+  input,
+  OnInit,
+  signal,
+  viewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromEvent, merge } from 'rxjs';
+import { cn } from '@semantic-components/ui';
+import { ScScrollArea } from './scroll-area';
+
+export type ScrollBarOrientation = 'vertical' | 'horizontal';
+
+@Component({
+  selector: 'div[sc-scroll-bar]',
+  host: {
+    'data-slot': 'scroll-bar',
+    '[class]': 'class()',
+    '[attr.data-orientation]': 'orientation()',
+    '[attr.data-state]': 'isVisible() ? "visible" : "hidden"',
+    '(mousedown)': 'onTrackClick($event)',
+  },
+  template: `
+    <div
+      #thumb
+      data-slot="scroll-thumb"
+      [class]="thumbClass()"
+      [style.transform]="thumbTransform()"
+      [style.height]="orientation() === 'vertical' ? thumbSize() + '%' : null"
+      [style.width]="orientation() === 'horizontal' ? thumbSize() + '%' : null"
+      (mousedown)="onThumbMouseDown($event)"
+    ></div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScScrollBar implements OnInit {
+  private readonly scrollArea = inject(ScScrollArea);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly elementRef = inject(ElementRef<HTMLElement>);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly orientation = input<ScrollBarOrientation>('vertical');
+
+  readonly thumb = viewChild.required<ElementRef<HTMLDivElement>>('thumb');
+
+  private readonly isDragging = signal(false);
+  private dragStartPosition = 0;
+  private dragStartScroll = 0;
+
+  protected readonly isVisible = computed(() => {
+    if (this.orientation() === 'vertical') {
+      return this.scrollArea.scrollHeight() > this.scrollArea.clientHeight();
+    }
+    return this.scrollArea.scrollWidth() > this.scrollArea.clientWidth();
+  });
+
+  protected readonly thumbSize = computed(() => {
+    if (this.orientation() === 'vertical') {
+      const ratio =
+        this.scrollArea.clientHeight() / this.scrollArea.scrollHeight();
+      return Math.max(ratio * 100, 10);
+    }
+    const ratio = this.scrollArea.clientWidth() / this.scrollArea.scrollWidth();
+    return Math.max(ratio * 100, 10);
+  });
+
+  protected readonly thumbPosition = computed(() => {
+    if (this.orientation() === 'vertical') {
+      const scrollableHeight =
+        this.scrollArea.scrollHeight() - this.scrollArea.clientHeight();
+      if (scrollableHeight <= 0) return 0;
+      const trackHeight = 100 - this.thumbSize();
+      return (this.scrollArea.scrollTop() / scrollableHeight) * trackHeight;
+    }
+    const scrollableWidth =
+      this.scrollArea.scrollWidth() - this.scrollArea.clientWidth();
+    if (scrollableWidth <= 0) return 0;
+    const trackWidth = 100 - this.thumbSize();
+    return (this.scrollArea.scrollLeft() / scrollableWidth) * trackWidth;
+  });
+
+  protected readonly thumbTransform = computed(() => {
+    if (this.orientation() === 'vertical') {
+      return `translateY(${this.thumbPosition()}cqh)`;
+    }
+    return `translateX(${this.thumbPosition()}cqw)`;
+  });
+
+  protected readonly class = computed(() => {
+    const isVertical = this.orientation() === 'vertical';
+    return cn(
+      'flex touch-none select-none transition-colors container-size',
+      isVertical && 'h-full w-2.5 border-l border-l-transparent p-px',
+      !isVertical && 'h-2.5 flex-col border-t border-t-transparent p-px',
+      this.classInput(),
+    );
+  });
+
+  protected readonly thumbClass = computed(() =>
+    cn('relative flex-1 rounded-full bg-border'),
+  );
+
+  ngOnInit(): void {
+    const viewport = this.scrollArea.viewport().nativeElement;
+
+    fromEvent(viewport, 'scroll')
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => {
+        this.scrollArea.updateScrollState();
+      });
+
+    // Initial state
+    setTimeout(() => this.scrollArea.updateScrollState(), 0);
+
+    // Listen for resize
+    if (typeof ResizeObserver !== 'undefined') {
+      const resizeObserver = new ResizeObserver(() => {
+        this.scrollArea.updateScrollState();
+      });
+      resizeObserver.observe(viewport);
+      resizeObserver.observe(this.scrollArea.content().nativeElement);
+      this.destroyRef.onDestroy(() => resizeObserver.disconnect());
+    }
+
+    // Global mouse events for dragging
+    merge(
+      fromEvent<MouseEvent>(document, 'mousemove'),
+      fromEvent<MouseEvent>(document, 'mouseup'),
+    )
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((event) => {
+        if (event.type === 'mousemove' && this.isDragging()) {
+          this.onMouseMove(event);
+        } else if (event.type === 'mouseup') {
+          this.isDragging.set(false);
+        }
+      });
+  }
+
+  protected onThumbMouseDown(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isDragging.set(true);
+
+    if (this.orientation() === 'vertical') {
+      this.dragStartPosition = event.clientY;
+      this.dragStartScroll = this.scrollArea.scrollTop();
+    } else {
+      this.dragStartPosition = event.clientX;
+      this.dragStartScroll = this.scrollArea.scrollLeft();
+    }
+  }
+
+  protected onTrackClick(event: MouseEvent): void {
+    if (event.target === this.thumb().nativeElement) return;
+
+    const track = this.elementRef.nativeElement;
+    const rect = track.getBoundingClientRect();
+
+    if (this.orientation() === 'vertical') {
+      const clickPosition = (event.clientY - rect.top) / rect.height;
+      const scrollableHeight =
+        this.scrollArea.scrollHeight() - this.scrollArea.clientHeight();
+      this.scrollArea.scrollTo(clickPosition * scrollableHeight);
+    } else {
+      const clickPosition = (event.clientX - rect.left) / rect.width;
+      const scrollableWidth =
+        this.scrollArea.scrollWidth() - this.scrollArea.clientWidth();
+      this.scrollArea.scrollTo(
+        this.scrollArea.scrollTop(),
+        clickPosition * scrollableWidth,
+      );
+    }
+  }
+
+  private onMouseMove(event: MouseEvent): void {
+    const track = this.elementRef.nativeElement;
+    const rect = track.getBoundingClientRect();
+
+    if (this.orientation() === 'vertical') {
+      const delta = event.clientY - this.dragStartPosition;
+      const scrollableHeight =
+        this.scrollArea.scrollHeight() - this.scrollArea.clientHeight();
+      const trackHeight = rect.height;
+      const scrollDelta = (delta / trackHeight) * scrollableHeight;
+      this.scrollArea.scrollTo(this.dragStartScroll + scrollDelta);
+    } else {
+      const delta = event.clientX - this.dragStartPosition;
+      const scrollableWidth =
+        this.scrollArea.scrollWidth() - this.scrollArea.clientWidth();
+      const trackWidth = rect.width;
+      const scrollDelta = (delta / trackWidth) * scrollableWidth;
+      this.scrollArea.scrollTo(
+        this.scrollArea.scrollTop(),
+        this.dragStartScroll + scrollDelta,
+      );
+    }
+  }
+}

package/src/lib/components/search-input/README.md

@@ -0,0 +1,99 @@
+# Search Input
+
+A search input with autocomplete suggestions, debounced search, and keyboard navigation.
+
+## Installation
+
+```typescript
+import { ScSearchInput } from '@/ui/search-input';
+import type { SearchSuggestion, SearchInputOptions } from '@/ui/search-input';
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<sc-search-input [suggestions]="suggestions" (search)="onSearch($event)" (suggestionSelect)="onSelect($event)" />
+```
+
+```typescript
+suggestions: SearchSuggestion[] = [
+  { id: '1', label: 'Apple', description: 'A fruit' },
+  { id: '2', label: 'Banana', description: 'A yellow fruit' },
+];
+
+onSearch(query: string): void {
+  console.log('Search:', query);
+}
+
+onSelect(suggestion: SearchSuggestion): void {
+  console.log('Selected:', suggestion);
+}
+```
+
+### With Loading State
+
+```html
+<sc-search-input [suggestions]="results" [loading]="isLoading" (search)="onAsyncSearch($event)" />
+```
+
+### With Categories
+
+```typescript
+suggestions: SearchSuggestion[] = [
+  { id: '1', label: 'MacBook Pro', description: 'Laptop', category: 'Electronics' },
+  { id: '2', label: 'Nike Air Max', description: 'Shoes', category: 'Footwear' },
+];
+```
+
+## API Reference
+
+### Inputs
+
+| Input            | Type                 | Default       | Description              |
+| ---------------- | -------------------- | ------------- | ------------------------ |
+| `suggestions`    | `SearchSuggestion[]` | `[]`          | Autocomplete suggestions |
+| `placeholder`    | `string`             | `'Search...'` | Input placeholder        |
+| `debounceMs`     | `number`             | `300`         | Debounce delay in ms     |
+| `minChars`       | `number`             | `1`           | Min chars to trigger     |
+| `maxSuggestions` | `number`             | `10`          | Max suggestions to show  |
+| `loading`        | `boolean`            | `false`       | Show loading spinner     |
+| `class`          | `string`             | `''`          | Additional CSS classes   |
+
+### Outputs
+
+| Output             | Type               | Description                   |
+| ------------------ | ------------------ | ----------------------------- |
+| `search`           | `string`           | Emitted on debounced search   |
+| `suggestionSelect` | `SearchSuggestion` | Emitted when item is selected |
+| `queryChange`      | `string`           | Emitted on every input change |
+
+### Methods
+
+| Method    | Description        |
+| --------- | ------------------ |
+| `clear()` | Clear search input |
+| `focus()` | Focus the input    |
+
+## Type Definitions
+
+```typescript
+interface SearchSuggestion {
+  id: string;
+  label: string;
+  description?: string;
+  icon?: string;
+  category?: string;
+}
+```
+
+## Features
+
+- Debounced search to reduce API calls
+- Keyboard navigation (Arrow keys, Enter, Escape)
+- Loading state with spinner
+- Clear button
+- Category support for grouped suggestions
+- Click outside to close
+- Accessible with ARIA attributes

package/src/lib/components/search-input/index.ts

@@ -0,0 +1,6 @@
+export { ScSearchInput } from './search-input';
+export type {
+  SearchInputOptions,
+  SearchSuggestion,
+} from './search-input-types';
+export { DEFAULT_SEARCH_OPTIONS } from './search-input-types';

package/src/lib/components/search-input/search-input-types.ts

@@ -0,0 +1,21 @@
+export interface SearchSuggestion {
+  id: string;
+  label: string;
+  description?: string;
+  icon?: string;
+  category?: string;
+}
+
+export interface SearchInputOptions {
+  placeholder?: string;
+  debounceMs?: number;
+  minChars?: number;
+  maxSuggestions?: number;
+}
+
+export const DEFAULT_SEARCH_OPTIONS: Required<SearchInputOptions> = {
+  placeholder: 'Search...',
+  debounceMs: 300,
+  minChars: 1,
+  maxSuggestions: 10,
+};

package/src/lib/components/search-input/search-input.ts

@@ -0,0 +1,302 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  ElementRef,
+  inject,
+  input,
+  output,
+  signal,
+  viewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import type { SearchSuggestion } from './search-input-types';
+import { DEFAULT_SEARCH_OPTIONS } from './search-input-types';
+
+@Component({
+  selector: 'sc-search-input',
+  imports: [],
+  template: `
+    <div
+      [class]="containerClass()"
+      role="combobox"
+      [attr.aria-expanded]="isOpen()"
+    >
+      <div [class]="inputWrapperClass()">
+        <span
+          class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+          [innerHTML]="searchIcon"
+        ></span>
+        <input
+          #inputRef
+          type="text"
+          [class]="inputClass()"
+          [placeholder]="placeholder()"
+          [value]="query()"
+          [attr.aria-label]="placeholder()"
+          [attr.aria-autocomplete]="'list'"
+          [attr.aria-controls]="'search-suggestions'"
+          (input)="onInput($event)"
+          (focus)="onFocus()"
+          (keydown)="onKeydown($event)"
+        />
+        @if (query() && !loading()) {
+          <button
+            type="button"
+            class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            aria-label="Clear search"
+            (click)="clear()"
+          >
+            <span [innerHTML]="clearIcon"></span>
+          </button>
+        }
+        @if (loading()) {
+          <span class="absolute right-3 top-1/2 -translate-y-1/2">
+            <span
+              class="inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+            ></span>
+          </span>
+        }
+      </div>
+
+      @if (isOpen() && filteredSuggestions().length > 0) {
+        <div
+          id="search-suggestions"
+          [class]="suggestionsClass()"
+          role="listbox"
+        >
+          @for (
+            suggestion of filteredSuggestions();
+            track suggestion.id;
+            let i = $index
+          ) {
+            <button
+              type="button"
+              role="option"
+              [class]="suggestionClass(i)"
+              [attr.aria-selected]="highlightedIndex() === i"
+              (click)="selectSuggestion(suggestion)"
+              (mouseenter)="highlightedIndex.set(i)"
+            >
+              @if (suggestion.icon) {
+                <span
+                  class="inline-flex items-center justify-center [&>svg]:w-4 [&>svg]:h-4 text-muted-foreground"
+                  [innerHTML]="suggestion.icon"
+                ></span>
+              }
+              <div class="flex-1 text-left">
+                <div class="font-medium">{{ suggestion.label }}</div>
+                @if (suggestion.description) {
+                  <div class="text-xs text-muted-foreground">
+                    {{ suggestion.description }}
+                  </div>
+                }
+              </div>
+              @if (suggestion.category) {
+                <span class="text-xs text-muted-foreground">
+                  {{ suggestion.category }}
+                </span>
+              }
+            </button>
+          }
+        </div>
+      }
+
+      @if (
+        isOpen() &&
+        query().length >= minChars() &&
+        filteredSuggestions().length === 0 &&
+        !loading()
+      ) {
+        <div [class]="suggestionsClass()">
+          <div class="px-3 py-6 text-center text-sm text-muted-foreground">
+            No results found
+          </div>
+        </div>
+      }
+    </div>
+  `,
+  styles: `
+    :host {
+      display: block;
+    }
+  `,
+  host: {
+    '(document:click)': 'onDocumentClick($event)',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScSearchInput {
+  private readonly elementRef = inject(ElementRef<HTMLElement>);
+  private readonly destroyRef = inject(DestroyRef);
+
+  readonly inputRef = viewChild<ElementRef<HTMLInputElement>>('inputRef');
+
+  readonly suggestions = input<SearchSuggestion[]>([]);
+  readonly placeholder = input(DEFAULT_SEARCH_OPTIONS.placeholder);
+  readonly debounceMs = input(DEFAULT_SEARCH_OPTIONS.debounceMs);
+  readonly minChars = input(DEFAULT_SEARCH_OPTIONS.minChars);
+  readonly maxSuggestions = input(DEFAULT_SEARCH_OPTIONS.maxSuggestions);
+  readonly loading = input(false);
+  readonly class = input<string>('');
+
+  readonly search = output<string>();
+  readonly suggestionSelect = output<SearchSuggestion>();
+  readonly queryChange = output<string>();
+
+  protected readonly query = signal('');
+  protected readonly isOpen = signal(false);
+  protected readonly highlightedIndex = signal(-1);
+
+  private debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+  readonly searchIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>`;
+  readonly clearIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`;
+
+  protected readonly filteredSuggestions = computed(() => {
+    const q = this.query().toLowerCase();
+    if (q.length < this.minChars()) return [];
+
+    return this.suggestions()
+      .filter(
+        (s) =>
+          s.label.toLowerCase().includes(q) ||
+          s.description?.toLowerCase().includes(q) ||
+          s.category?.toLowerCase().includes(q),
+      )
+      .slice(0, this.maxSuggestions());
+  });
+
+  protected readonly containerClass = computed(() =>
+    cn('relative', this.class()),
+  );
+
+  protected readonly inputWrapperClass = computed(() => 'relative');
+
+  protected readonly inputClass = computed(() =>
+    cn(
+      'w-full h-10 pl-10 pr-10',
+      'rounded-md border border-input bg-background',
+      'text-sm placeholder:text-muted-foreground',
+      'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+    ),
+  );
+
+  protected readonly suggestionsClass = computed(() =>
+    cn(
+      'absolute top-full left-0 right-0 z-50 mt-1',
+      'max-h-[300px] overflow-auto',
+      'rounded-md border bg-popover shadow-md',
+      'animate-in fade-in-0 zoom-in-95',
+    ),
+  );
+
+  protected suggestionClass(index: number): string {
+    return cn(
+      'flex w-full items-center gap-3 px-3 py-2',
+      'cursor-pointer transition-colors',
+      'focus:outline-none',
+      this.highlightedIndex() === index
+        ? 'bg-accent text-accent-foreground'
+        : 'hover:bg-accent hover:text-accent-foreground',
+    );
+  }
+
+  constructor() {
+    this.destroyRef.onDestroy(() => {
+      if (this.debounceTimer) {
+        clearTimeout(this.debounceTimer);
+      }
+    });
+  }
+
+  onInput(event: Event): void {
+    const value = (event.target as HTMLInputElement).value;
+    this.query.set(value);
+    this.queryChange.emit(value);
+    this.highlightedIndex.set(-1);
+
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+    }
+
+    if (value.length >= this.minChars()) {
+      this.isOpen.set(true);
+      this.debounceTimer = setTimeout(() => {
+        this.search.emit(value);
+      }, this.debounceMs());
+    } else {
+      this.isOpen.set(false);
+    }
+  }
+
+  onFocus(): void {
+    if (this.query().length >= this.minChars()) {
+      this.isOpen.set(true);
+    }
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    const suggestions = this.filteredSuggestions();
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        if (!this.isOpen()) {
+          this.isOpen.set(true);
+        } else {
+          this.highlightedIndex.update((i) =>
+            Math.min(i + 1, suggestions.length - 1),
+          );
+        }
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.highlightedIndex.update((i) => Math.max(i - 1, 0));
+        break;
+      case 'Enter':
+        event.preventDefault();
+        const index = this.highlightedIndex();
+        if (index >= 0 && index < suggestions.length) {
+          this.selectSuggestion(suggestions[index]);
+        } else if (this.query().length >= this.minChars()) {
+          this.search.emit(this.query());
+        }
+        break;
+      case 'Escape':
+        this.isOpen.set(false);
+        this.highlightedIndex.set(-1);
+        break;
+    }
+  }
+
+  onDocumentClick(event: MouseEvent): void {
+    if (!this.elementRef.nativeElement.contains(event.target as Node)) {
+      this.isOpen.set(false);
+    }
+  }
+
+  selectSuggestion(suggestion: SearchSuggestion): void {
+    this.query.set(suggestion.label);
+    this.queryChange.emit(suggestion.label);
+    this.suggestionSelect.emit(suggestion);
+    this.isOpen.set(false);
+    this.highlightedIndex.set(-1);
+  }
+
+  clear(): void {
+    this.query.set('');
+    this.queryChange.emit('');
+    this.isOpen.set(false);
+    this.highlightedIndex.set(-1);
+    this.inputRef()?.nativeElement.focus();
+  }
+
+  focus(): void {
+    this.inputRef()?.nativeElement.focus();
+  }
+}