@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,207 +0,0 @@
-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

@@ -1,99 +0,0 @@
-# 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

@@ -1,6 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,302 +0,0 @@
-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();
-  }
-}