@ng-cn/core 1.0.11 → 1.0.12

package/src/app/lib/components/ui/command/command-item.component.ts

@@ -0,0 +1,148 @@
+import { cn } from '@/lib/utils';
+import {
+    afterNextRender,
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    effect,
+    ElementRef,
+    inject,
+    input,
+    OnDestroy,
+    OnInit,
+    output,
+} from '@angular/core';
+import { COMMAND_CONTEXT } from './command-context';
+
+let itemIndexCounter = 0;
+
+/**
+ * CommandItem component - a single item in the command list.
+ * Matches shadcn/ui React CommandItem exactly.
+ * Implements option role with proper focus management.
+ */
+@Component({
+  selector: 'CommandItem',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.role]': '"option"',
+    '[attr.id]': 'itemId',
+    '[attr.data-command-index]': 'visibleIndex()',
+    '[attr.tabindex]': '"-1"',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+    '[attr.data-selected]': 'isFocused() ? "" : null',
+    '[attr.aria-selected]': 'isFocused()',
+    '[attr.aria-disabled]': 'disabled()',
+    '[hidden]': '!isVisible()',
+    '(click)': 'handleClick()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CommandItem implements OnInit, OnDestroy {
+  protected readonly context = inject(COMMAND_CONTEXT);
+  private readonly elementRef = inject(ElementRef);
+
+  readonly itemIndex = itemIndexCounter++;
+  readonly itemId = `command-item-${this.itemIndex}`;
+
+  /** Unique value for this item */
+  readonly value = input<string>('');
+
+  /** Keywords for search filtering */
+  readonly keywords = input<string[]>([]);
+
+  /** Whether the item is disabled */
+  readonly disabled = input<boolean>(false);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  /** Select event emitted when item is clicked */
+  readonly onSelect = output<string>();
+
+  /** Whether item matches current search filter */
+  protected readonly isVisible = computed(() => {
+    return this.context.shouldShowItem(this.value(), this.keywords());
+  });
+
+  /** Get visible index among shown items */
+  protected readonly visibleIndex = computed(() => {
+    if (!this.isVisible()) return -1;
+
+    const parent = this.elementRef.nativeElement.closest('CommandList, [role="listbox"]');
+    if (parent) {
+      const visibleItems = Array.from(
+        parent.querySelectorAll('CommandItem:not([hidden])')
+      );
+      return visibleItems.indexOf(this.elementRef.nativeElement);
+    }
+    return this.localIndex;
+  });
+
+  protected readonly isFocused = computed(() => {
+    const focusedIdx = this.context.focusedIndex();
+    return this.isVisible() && this.getLocalIndex() === focusedIdx;
+  });
+
+  private localIndex = -1;
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[selected]:bg-accent data-[selected]:text-accent-foreground data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      !this.disabled() && 'cursor-pointer hover:bg-accent hover:text-accent-foreground',
+      this.class()
+    )
+  );
+
+  constructor() {
+    // Scroll into view when focused
+    effect(() => {
+      if (this.isFocused()) {
+        this.elementRef.nativeElement.scrollIntoView({ block: 'nearest' });
+      }
+    });
+
+    // Update local index after render (browser-only)
+    afterNextRender(() => {
+      this.updateLocalIndex();
+      this.context.itemCount.update(c => c + 1);
+    });
+  }
+
+  ngOnInit(): void {
+    this.context.registerItem(this.value());
+  }
+
+  ngOnDestroy(): void {
+    this.context.unregisterItem(this.value());
+    this.context.itemCount.update(c => Math.max(0, c - 1));
+  }
+
+  private updateLocalIndex(): void {
+    // Find our position among sibling command items
+    const parent = this.elementRef.nativeElement.closest('CommandList, [role="listbox"]');
+    if (parent) {
+      const items = Array.from(parent.querySelectorAll('CommandItem'));
+      this.localIndex = items.indexOf(this.elementRef.nativeElement);
+    }
+  }
+
+  private getLocalIndex(): number {
+    // Dynamically compute index based on visible DOM position
+    const parent = this.elementRef.nativeElement.closest('CommandList, [role="listbox"]');
+    if (parent) {
+      const visibleItems = Array.from(
+        parent.querySelectorAll('CommandItem:not([hidden])')
+      );
+      return visibleItems.indexOf(this.elementRef.nativeElement);
+    }
+    return this.localIndex;
+  }
+
+  protected handleClick(): void {
+    if (this.disabled() || !this.isVisible()) return;
+    this.context.selectedValue.set(this.value());
+    this.onSelect.emit(this.value());
+  }
+}

package/src/app/lib/components/ui/command/command-list.component.ts

@@ -0,0 +1,30 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { COMMAND_CONTEXT } from './command-context';
+
+/**
+ * CommandList component - the scrollable list of items.
+ * Matches shadcn/ui React CommandList exactly.
+ * Implements listbox role for accessibility.
+ */
+@Component({
+  selector: 'CommandList',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.id]': 'context.listId',
+    'role': 'listbox',
+    '[attr.aria-label]': '"Command suggestions"',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CommandList {
+  protected readonly context = inject(COMMAND_CONTEXT);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('max-h-[300px] overflow-y-auto overflow-x-hidden', this.class())
+  );
+}

package/src/app/lib/components/ui/command/command-separator.component.ts

@@ -0,0 +1,23 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * CommandSeparator component - a separator between groups.
+ * Matches shadcn/ui React CommandSeparator exactly.
+ */
+@Component({
+  selector: 'CommandSeparator',
+  template: ``,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CommandSeparator {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('-mx-1 h-px bg-border', this.class())
+  );
+}

package/src/app/lib/components/ui/command/command-shortcut.component.ts

@@ -0,0 +1,23 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * CommandShortcut component - displays keyboard shortcut hint.
+ * Matches shadcn/ui React CommandShortcut exactly.
+ */
+@Component({
+  selector: 'CommandShortcut',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CommandShortcut {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('ml-auto text-xs tracking-widest text-muted-foreground', this.class())
+  );
+}

package/src/app/lib/components/ui/command/command.component.ts

@@ -0,0 +1,105 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, forwardRef, input, signal } from '@angular/core';
+import { COMMAND_CONTEXT, type CommandContextValue, type CommandFilterFunction } from './command-context';
+
+let commandIdCounter = 0;
+
+/**
+ * Default filter function for command items.
+ */
+const defaultFilterFn: CommandFilterFunction = (value: string, search: string, keywords?: string[]): number => {
+  if (!search.trim()) return 1;
+
+  const extendedValue = keywords ? `${value} ${keywords.join(' ')}` : value;
+  const normalizedValue = extendedValue.toLowerCase();
+  const normalizedSearch = search.toLowerCase();
+
+  // Exact match scores highest
+  if (normalizedValue === normalizedSearch) return 1;
+
+  // Prefix match
+  if (normalizedValue.startsWith(normalizedSearch)) return 0.8;
+
+  // Check if any word starts with search
+  const words = normalizedValue.split(' ');
+  for (const word of words) {
+    if (word.startsWith(normalizedSearch)) return 0.7;
+  }
+
+  // Contains match
+  if (normalizedValue.includes(normalizedSearch)) return 0.5;
+
+  // No match
+  return 0;
+};
+
+/**
+ * Command component - a command palette/menu component.
+ * Matches shadcn/ui React Command exactly.
+ * Implements combobox pattern with proper ARIA roles and keyboard navigation.
+ */
+@Component({
+  selector: 'Command',
+  template: `<ng-content />`,
+  providers: [
+    {
+      provide: COMMAND_CONTEXT,
+      useExisting: forwardRef(() => Command),
+    },
+  ],
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Command implements CommandContextValue {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  /** Custom filter function for search */
+  readonly filter = input<CommandFilterFunction | undefined>(undefined);
+
+  // CommandContextValue implementation
+  private readonly _id = commandIdCounter++;
+  private readonly _items: string[] = [];
+
+  readonly search = signal('');
+  readonly selectedValue = signal('');
+  readonly focusedIndex = signal(-1);
+  readonly itemCount = signal(0);
+  readonly visibleItemCount = signal(0);
+  readonly listId = `command-list-${this._id}`;
+  readonly inputId = `command-input-${this._id}`;
+
+  readonly filterFunction = computed(() => {
+    return this.filter() ?? defaultFilterFn;
+  });
+
+  registerItem = (value: string) => {
+    if (!this._items.includes(value)) {
+      this._items.push(value);
+    }
+  };
+
+  unregisterItem = (value: string) => {
+    const index = this._items.indexOf(value);
+    if (index > -1) {
+      this._items.splice(index, 1);
+    }
+  };
+
+  getItems = () => this._items;
+
+  shouldShowItem = (value: string, keywords?: string[]): boolean => {
+    const searchValue = this.search();
+    if (!searchValue) return true;
+    return this.filterFunction()(value, searchValue, keywords) > 0;
+  };
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+      this.class()
+    )
+  );
+}

package/src/app/lib/components/ui/command/index.ts

@@ -0,0 +1,11 @@
+export { COMMAND_CONTEXT, type CommandContextValue } from './command-context';
+export { CommandDialog } from './command-dialog.component';
+export { CommandEmpty } from './command-empty.component';
+export { CommandGroup } from './command-group.component';
+export { CommandInput } from './command-input.component';
+export { CommandItem } from './command-item.component';
+export { CommandList } from './command-list.component';
+export { CommandSeparator } from './command-separator.component';
+export { CommandShortcut } from './command-shortcut.component';
+export { Command } from './command.component';
+

package/src/app/lib/components/ui/context-menu/context-menu-checkbox-item.component.ts

@@ -0,0 +1,68 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, inject, input, model, output } from '@angular/core';
+import { Check, LucideAngularModule } from 'lucide-angular';
+import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
+
+/**
+ * ContextMenuCheckboxItem component - a checkbox item in the context menu.
+ * Matches shadcn/ui React ContextMenuCheckboxItem exactly.
+ */
+@Component({
+  selector: 'ContextMenuCheckboxItem',
+  imports: [LucideAngularModule],
+  template: `
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      @if (checked()) {
+        <lucide-icon [img]="CheckIcon" class="h-4 w-4" />
+      }
+    </span>
+    <ng-content />
+  `,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.role]': '"menuitemcheckbox"',
+    '[attr.aria-checked]': 'checked()',
+    '[attr.tabindex]': 'disabled() ? -1 : 0',
+    '[attr.aria-disabled]': 'disabled()',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+    '[attr.data-state]': 'checked() ? "checked" : "unchecked"',
+    '(click)': 'handleClick($event)',
+    '(keydown.enter)': 'handleClick($event)',
+    '(keydown.space)': 'handleClick($event)',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ContextMenuCheckboxItem {
+  private readonly context = inject(CONTEXT_MENU_CONTEXT);
+  protected readonly CheckIcon = Check;
+
+  /** Whether the checkbox is checked */
+  readonly checked = model<boolean>(false);
+
+  /** Whether the item is disabled */
+  readonly disabled = input<boolean>(false);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  /** Checked change event */
+  readonly onCheckedChange = output<boolean>();
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      !this.disabled() && 'cursor-pointer hover:bg-accent hover:text-accent-foreground',
+      this.class()
+    )
+  );
+
+  protected handleClick(event: Event): void {
+    if (this.disabled()) {
+      event.preventDefault();
+      return;
+    }
+    const newValue = !this.checked();
+    this.checked.set(newValue);
+    this.onCheckedChange.emit(newValue);
+  }
+}

package/src/app/lib/components/ui/context-menu/context-menu-content.component.ts

@@ -0,0 +1,213 @@
+import { cn, Presence } from '@/lib/utils';
+import {
+    afterNextRender,
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    effect,
+    ElementRef,
+    inject,
+    input,
+    OnDestroy,
+} from '@angular/core';
+import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
+
+/**
+ * ContextMenuContent component - the content panel of the context menu.
+ * Matches shadcn/ui React ContextMenuContent exactly.
+ * Includes full keyboard navigation: Arrow keys, Home/End, typeahead, roving tabindex.
+ */
+@Component({
+  selector: 'ContextMenuContent',
+  imports: [Presence],
+  template: `
+    <Presence [present]="context.open()">
+      <div
+        [class]="computedClass()"
+        [attr.data-state]="context.open() ? 'open' : 'closed'"
+        [style.position]="'fixed'"
+        [style.left.px]="context.position().x"
+        [style.top.px]="context.position().y"
+        role="menu"
+        aria-orientation="vertical"
+        tabindex="-1"
+        (keydown)="onKeydown($event)"
+      >
+        <ng-content />
+      </div>
+    </Presence>
+  `,
+  host: {
+    class: 'contents',
+    '(document:click)': 'onDocumentClick()',
+    '(document:keydown.escape)': 'onEscapeKey()',
+    '(document:contextmenu)': 'onAnotherContextMenu()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ContextMenuContent implements OnDestroy {
+  protected readonly context = inject(CONTEXT_MENU_CONTEXT);
+  private readonly elementRef = inject(ElementRef);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  private menuItems: HTMLElement[] = [];
+  private typeaheadBuffer = '';
+  private typeaheadTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'z-50 min-w-[12rem] overflow-hidden rounded-xl border bg-popover p-2 text-popover-foreground shadow-lg',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out',
+      'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+      this.class()
+    )
+  );
+
+  constructor() {
+    // Focus first item when menu opens
+    effect(() => {
+      if (this.context.open()) {
+        setTimeout(() => {
+          this.updateMenuItems();
+          const focusedIdx = this.context.focusedIndex();
+          if (focusedIdx >= 0 && this.menuItems[focusedIdx]) {
+            this.menuItems[focusedIdx].focus();
+          } else if (this.menuItems.length > 0) {
+            this.menuItems[0].focus();
+            this.context.focusedIndex.set(0);
+          }
+        }, 0);
+      }
+    });
+
+    // Initial menu items update (browser-only)
+    afterNextRender(() => {
+      this.updateMenuItems();
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (this.typeaheadTimeout) {
+      clearTimeout(this.typeaheadTimeout);
+    }
+  }
+
+  private updateMenuItems(): void {
+    const content = this.elementRef.nativeElement.querySelector('[role="menu"]');
+    if (content) {
+      this.menuItems = Array.from(
+        content.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"]):not([data-disabled])')
+      );
+    }
+  }
+
+  protected onKeydown(event: KeyboardEvent): void {
+    this.updateMenuItems();
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.focusNext();
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.focusPrevious();
+        break;
+      case 'Home':
+        event.preventDefault();
+        this.focusFirst();
+        break;
+      case 'End':
+        event.preventDefault();
+        this.focusLast();
+        break;
+      case 'Tab':
+        // Close menu and let tab continue naturally
+        this.close();
+        break;
+      default:
+        // Typeahead search
+        if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+          this.handleTypeahead(event.key);
+        }
+        break;
+    }
+  }
+
+  private focusNext(): void {
+    const currentIndex = this.context.focusedIndex();
+    const nextIndex = currentIndex < this.menuItems.length - 1 ? currentIndex + 1 : 0;
+    this.focusItem(nextIndex);
+  }
+
+  private focusPrevious(): void {
+    const currentIndex = this.context.focusedIndex();
+    const prevIndex = currentIndex > 0 ? currentIndex - 1 : this.menuItems.length - 1;
+    this.focusItem(prevIndex);
+  }
+
+  private focusFirst(): void {
+    this.focusItem(0);
+  }
+
+  private focusLast(): void {
+    this.focusItem(this.menuItems.length - 1);
+  }
+
+  private focusItem(index: number): void {
+    if (index >= 0 && index < this.menuItems.length) {
+      // Update roving tabindex
+      this.menuItems.forEach((item, i) => {
+        item.setAttribute('tabindex', i === index ? '0' : '-1');
+      });
+      this.menuItems[index].focus();
+      this.context.focusedIndex.set(index);
+    }
+  }
+
+  private handleTypeahead(key: string): void {
+    this.typeaheadBuffer += key.toLowerCase();
+
+    if (this.typeaheadTimeout) {
+      clearTimeout(this.typeaheadTimeout);
+    }
+
+    this.typeaheadTimeout = setTimeout(() => {
+      this.typeaheadBuffer = '';
+    }, 500);
+
+    // Find first matching item
+    const matchIndex = this.menuItems.findIndex((item) =>
+      item.textContent?.toLowerCase().trim().startsWith(this.typeaheadBuffer)
+    );
+
+    if (matchIndex >= 0) {
+      this.focusItem(matchIndex);
+    }
+  }
+
+  private close(): void {
+    this.context.open.set(false);
+    this.context.focusedIndex.set(-1);
+    // Restore focus to trigger element
+    const triggerEl = this.context.triggerElement();
+    if (triggerEl) {
+      triggerEl.focus();
+    }
+  }
+
+  protected onDocumentClick(): void {
+    this.close();
+  }
+
+  protected onEscapeKey(): void {
+    this.close();
+  }
+
+  protected onAnotherContextMenu(): void {
+    // Will be handled by new context menu trigger
+  }
+}

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

@@ -0,0 +1,17 @@
+import { InjectionToken, type WritableSignal } from '@angular/core';
+
+export interface ContextMenuPosition {
+  x: number;
+  y: number;
+}
+
+export interface ContextMenuContextValue {
+  open: WritableSignal<boolean>;
+  position: WritableSignal<ContextMenuPosition>;
+  focusedIndex: WritableSignal<number>;
+  triggerElement: WritableSignal<HTMLElement | null>;
+}
+
+export const CONTEXT_MENU_CONTEXT = new InjectionToken<ContextMenuContextValue>(
+  'CONTEXT_MENU_CONTEXT'
+);