@ng-cn/core 1.0.11 → 1.0.12

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

@@ -0,0 +1,234 @@
+import { cn, Presence } from '@/lib/utils';
+import {
+    afterNextRender,
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    effect,
+    ElementRef,
+    inject,
+    input,
+    OnDestroy
+} from '@angular/core';
+import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
+
+/**
+ * DropdownMenuContent component - the content panel of the dropdown.
+ * Matches shadcn/ui React DropdownMenuContent exactly.
+ * Includes keyboard navigation with arrow keys, Home/End, and typeahead.
+ * Uses Presence component for proper exit animations.
+ */
+@Component({
+  selector: 'DropdownMenuContent',
+  imports: [Presence],
+  template: `
+    <Presence [present]="context.open()">
+      <div
+        [class]="computedClass()"
+        [attr.id]="context.contentId"
+        [attr.aria-labelledby]="null"
+        [attr.data-state]="context.open() ? 'open' : 'closed'"
+        [attr.data-side]="side()"
+        [attr.data-align]="align()"
+        role="menu"
+        aria-orientation="vertical"
+        tabindex="-1"
+        (keydown)="onKeydown($event)"
+      >
+        <ng-content />
+      </div>
+    </Presence>
+  `,
+  host: {
+    class: 'contents',
+    '(document:click)': 'onDocumentClick($event)',
+    '(document:keydown.escape)': 'onEscapeKey()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DropdownMenuContent implements OnDestroy {
+  protected readonly context = inject(DROPDOWN_MENU_CONTEXT);
+  private readonly elementRef = inject(ElementRef);
+
+  /** Side of the trigger to place content */
+  readonly side = input<'top' | 'right' | 'bottom' | 'left'>('bottom');
+
+  /** Alignment of the content */
+  readonly align = input<'start' | 'center' | 'end'>('start');
+
+  /** Side offset */
+  readonly sideOffset = input<number>(4);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  private menuItems: HTMLElement[] = [];
+  private typeaheadBuffer = '';
+  private typeaheadTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  protected readonly computedClass = computed(() => {
+    const sideClasses = {
+      top: 'bottom-full mb-1',
+      bottom: 'top-full mt-1',
+      left: 'right-full mr-1',
+      right: 'left-full ml-1',
+    };
+
+    const alignClasses = {
+      start: 'left-0',
+      center: 'left-1/2 -translate-x-1/2',
+      end: 'right-0',
+    };
+
+    return cn(
+      'absolute 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      sideClasses[this.side()],
+      alignClasses[this.align()],
+      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])')
+      );
+    }
+  }
+
+  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) {
+      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);
+    }
+  }
+
+  protected onDocumentClick(event: MouseEvent): void {
+    const target = event.target as HTMLElement;
+    const hostElement = this.elementRef.nativeElement;
+    const parent = hostElement.closest('DropdownMenu');
+
+    if (parent && !parent.contains(target)) {
+      this.close();
+    }
+  }
+
+  protected onEscapeKey(): void {
+    this.close();
+  }
+
+  private close(): void {
+    this.context.open.set(false);
+    this.context.focusedIndex.set(-1);
+    // Restore focus to trigger
+    const triggerEl = this.context.triggerElement();
+    if (triggerEl) {
+      setTimeout(() => triggerEl.focus(), 0);
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+import { InjectionToken, type WritableSignal } from '@angular/core';
+
+export interface DropdownMenuContextValue {
+  open: WritableSignal<boolean>;
+  /** ID for the menu content for ARIA */
+  contentId: string;
+  /** Reference to trigger element for focus restoration */
+  triggerElement: WritableSignal<HTMLElement | null>;
+  /** Currently focused item index for keyboard navigation */
+  focusedIndex: WritableSignal<number>;
+}
+
+export const DROPDOWN_MENU_CONTEXT = new InjectionToken<DropdownMenuContextValue>(
+  'DROPDOWN_MENU_CONTEXT'
+);

package/src/app/lib/components/ui/dropdown-menu/dropdown-menu-group.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * DropdownMenuGroup component - groups related menu items.
+ * Matches shadcn/ui React DropdownMenuGroup exactly.
+ */
+@Component({
+  selector: 'DropdownMenuGroup',
+  template: `<ng-content />`,
+  host: {
+    '[attr.role]': '"group"',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DropdownMenuGroup {}

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

@@ -0,0 +1,56 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
+import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
+
+/**
+ * DropdownMenuItem component - a single item in the dropdown menu.
+ * Matches shadcn/ui React DropdownMenuItem exactly.
+ */
+@Component({
+  selector: 'DropdownMenuItem',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.role]': '"menuitem"',
+    '[attr.tabindex]': 'disabled() ? -1 : 0',
+    '[attr.aria-disabled]': 'disabled()',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+    '(click)': 'handleClick($event)',
+    '(keydown.enter)': 'handleClick($event)',
+    '(keydown.space)': 'handleClick($event)',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DropdownMenuItem {
+  private readonly context = inject(DROPDOWN_MENU_CONTEXT);
+
+  /** Whether the item is disabled */
+  readonly disabled = input<boolean>(false);
+
+  /** Whether the item is inset (extra padding) */
+  readonly inset = input<boolean>(false);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  /** Select event emitted when item is clicked */
+  readonly onSelect = output<void>();
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      "relative flex cursor-default select-none items-center gap-3 rounded-md px-3 py-2.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 [&>lucide-icon]:size-4 [&>lucide-icon]:shrink-0 [&>lucide-icon]:text-muted-foreground",
+      this.inset() && 'pl-8',
+      !this.disabled() && 'cursor-pointer hover:bg-accent hover:text-accent-foreground',
+      this.class()
+    )
+  );
+
+  protected handleClick(event: Event): void {
+    if (this.disabled()) {
+      event.preventDefault();
+      return;
+    }
+    this.onSelect.emit();
+    this.context.open.set(false);
+  }
+}

package/src/app/lib/components/ui/dropdown-menu/dropdown-menu-label.component.ts

@@ -0,0 +1,30 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * DropdownMenuLabel component - a label in the dropdown menu.
+ * Matches shadcn/ui React DropdownMenuLabel exactly.
+ */
+@Component({
+  selector: 'DropdownMenuLabel',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DropdownMenuLabel {
+  /** Whether the label is inset (extra padding) */
+  readonly inset = input<boolean>(false);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'px-3 py-2 text-sm font-semibold',
+      this.inset() && 'pl-8',
+      this.class()
+    )
+  );
+}

package/src/app/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.component.ts

@@ -0,0 +1,42 @@
+import { ChangeDetectionStrategy, Component, InjectionToken, model, output, signal, type WritableSignal } from '@angular/core';
+
+export interface DropdownMenuRadioGroupContext {
+  value: WritableSignal<string>;
+  setValue: (value: string) => void;
+}
+
+export const DROPDOWN_MENU_RADIO_GROUP_CONTEXT = new InjectionToken<DropdownMenuRadioGroupContext>(
+  'DROPDOWN_MENU_RADIO_GROUP_CONTEXT'
+);
+
+/**
+ * DropdownMenuRadioGroup component - a group of radio items in the dropdown.
+ * Matches shadcn/ui React DropdownMenuRadioGroup exactly.
+ */
+@Component({
+  selector: 'DropdownMenuRadioGroup',
+  template: `<ng-content />`,
+  providers: [
+    {
+      provide: DROPDOWN_MENU_RADIO_GROUP_CONTEXT,
+      useFactory: () => {
+        const internalValue = signal('');
+        return {
+          value: internalValue,
+          setValue: (newValue: string) => internalValue.set(newValue),
+        };
+      },
+    },
+  ],
+  host: {
+    '[attr.role]': '"group"',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DropdownMenuRadioGroup {
+  /** The current value */
+  readonly value = model<string>('');
+
+  /** Value change event */
+  readonly onValueChange = output<string>();
+}

package/src/app/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.component.ts

@@ -0,0 +1,71 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
+import { Circle, LucideAngularModule } from 'lucide-angular';
+import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
+import { DROPDOWN_MENU_RADIO_GROUP_CONTEXT } from './dropdown-menu-radio-group.component';
+
+/**
+ * DropdownMenuRadioItem component - a radio item in the dropdown.
+ * Matches shadcn/ui React DropdownMenuRadioItem exactly.
+ */
+@Component({
+  selector: 'DropdownMenuRadioItem',
+  imports: [LucideAngularModule],
+  template: `
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      @if (isSelected()) {
+        <lucide-icon [img]="CircleIcon" class="h-2 w-2 fill-current" />
+      }
+    </span>
+    <ng-content />
+  `,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.role]': '"menuitemradio"',
+    '[attr.aria-checked]': 'isSelected()',
+    '[attr.tabindex]': 'disabled() ? -1 : 0',
+    '[attr.aria-disabled]': 'disabled()',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+    '[attr.data-state]': 'isSelected() ? "checked" : "unchecked"',
+    '(click)': 'handleClick($event)',
+    '(keydown.enter)': 'handleClick($event)',
+    '(keydown.space)': 'handleClick($event)',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DropdownMenuRadioItem {
+  private readonly context = inject(DROPDOWN_MENU_CONTEXT);
+  private readonly radioGroupContext = inject(DROPDOWN_MENU_RADIO_GROUP_CONTEXT);
+  protected readonly CircleIcon = Circle;
+
+  /** The value of this radio item */
+  readonly value = input.required<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<void>();
+
+  protected readonly isSelected = computed(() => this.radioGroupContext.value() === this.value());
+
+  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 transition-colors 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;
+    }
+    this.radioGroupContext.setValue(this.value());
+    this.onSelect.emit();
+  }
+}

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

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

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

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

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

@@ -0,0 +1,51 @@
+import { cn, Presence } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { DROPDOWN_MENU_SUB_CONTEXT } from './dropdown-menu-sub.component';
+
+/**
+ * DropdownMenuSubContent component - content panel for submenu.
+ * Matches shadcn/ui React DropdownMenuSubContent exactly.
+ */
+@Component({
+  selector: 'DropdownMenuSubContent',
+  imports: [Presence],
+  template: `
+    <Presence [present]="subContext.open()">
+      <div
+        [class]="computedClass()"
+        [attr.data-state]="subContext.open() ? 'open' : 'closed'"
+        role="menu"
+      >
+        <ng-content />
+      </div>
+    </Presence>
+  `,
+  host: {
+    class: 'contents',
+    '(mouseenter)': 'onMouseEnter()',
+    '(mouseleave)': 'onMouseLeave()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DropdownMenuSubContent {
+  protected readonly subContext = inject(DROPDOWN_MENU_SUB_CONTEXT);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'absolute left-full top-0 z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      this.class()
+    )
+  );
+
+  protected onMouseEnter(): void {
+    this.subContext.open.set(true);
+  }
+
+  protected onMouseLeave(): void {
+    this.subContext.open.set(false);
+  }
+}

package/src/app/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.component.ts

@@ -0,0 +1,53 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { ChevronRight, LucideAngularModule } from 'lucide-angular';
+import { DROPDOWN_MENU_SUB_CONTEXT } from './dropdown-menu-sub.component';
+
+/**
+ * DropdownMenuSubTrigger component - trigger for submenu.
+ * Matches shadcn/ui React DropdownMenuSubTrigger exactly.
+ */
+@Component({
+  selector: 'DropdownMenuSubTrigger',
+  imports: [LucideAngularModule],
+  template: `
+    <ng-content />
+    <lucide-icon [img]="ChevronRightIcon" class="ml-auto h-4 w-4" />
+  `,
+  host: {
+    '[class]': 'computedClass()',
+    '(mouseenter)': 'onMouseEnter()',
+    '(mouseleave)': 'onMouseLeave()',
+    '[attr.data-state]': 'subContext.open() ? "open" : "closed"',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DropdownMenuSubTrigger {
+  protected readonly subContext = inject(DROPDOWN_MENU_SUB_CONTEXT);
+  protected readonly ChevronRightIcon = ChevronRight;
+
+  /** Whether the trigger is inset (extra padding) */
+  readonly inset = input<boolean>(false);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&>svg]:size-4 [&>svg]:shrink-0',
+      this.inset() && 'pl-8',
+      this.class()
+    )
+  );
+
+  protected onMouseEnter(): void {
+    this.subContext.open.set(true);
+  }
+
+  protected onMouseLeave(): void {
+    // Delay closing to allow mouse to move to sub-content
+    setTimeout(() => {
+      // Check if mouse is still outside both trigger and content
+    }, 100);
+  }
+}

package/src/app/lib/components/ui/dropdown-menu/dropdown-menu-sub.component.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, InjectionToken, signal, type WritableSignal } from '@angular/core';
+
+export interface DropdownMenuSubContext {
+  open: WritableSignal<boolean>;
+}
+
+export const DROPDOWN_MENU_SUB_CONTEXT = new InjectionToken<DropdownMenuSubContext>(
+  'DROPDOWN_MENU_SUB_CONTEXT'
+);
+
+/**
+ * DropdownMenuSub component - container for submenu.
+ * Matches shadcn/ui React DropdownMenuSub exactly.
+ */
+@Component({
+  selector: 'DropdownMenuSub',
+  template: `<ng-content />`,
+  providers: [
+    {
+      provide: DROPDOWN_MENU_SUB_CONTEXT,
+      useFactory: (): DropdownMenuSubContext => ({
+        open: signal(false),
+      }),
+    },
+  ],
+  host: {
+    class: 'relative',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DropdownMenuSub {}