@ng-cn/core 1.0.11 → 1.0.14

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

@@ -0,0 +1,236 @@
+import { cn, Presence } from '@/lib/utils';
+import {
+    afterNextRender,
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    effect,
+    ElementRef,
+    inject,
+    input,
+    OnDestroy,
+} from '@angular/core';
+import { MENUBAR_CONTEXT, MENUBAR_MENU_CONTEXT } from './menubar-context';
+
+/**
+ * MenubarContent component - content panel for a menu.
+ * Matches shadcn/ui React MenubarContent exactly.
+ * Implements full keyboard navigation with arrow keys, Home/End, and typeahead.
+ */
+@Component({
+  selector: 'MenubarContent',
+  imports: [Presence],
+  template: `
+    <Presence [present]="menuContext.open()">
+      <div
+        [class]="computedClass()"
+        [attr.data-state]="menuContext.open() ? 'open' : 'closed'"
+        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 MenubarContent implements OnDestroy {
+  protected readonly context = inject(MENUBAR_CONTEXT);
+  protected readonly menuContext = inject(MENUBAR_MENU_CONTEXT);
+  private readonly elementRef = inject(ElementRef);
+
+  /** Alignment */
+  readonly align = input<'start' | 'center' | 'end'>('start');
+
+  /** Side offset */
+  readonly sideOffset = input<number>(8);
+
+  /** Align offset */
+  readonly alignOffset = 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 alignClasses = {
+      start: 'left-0',
+      center: 'left-1/2 -translate-x-1/2',
+      end: 'right-0',
+    };
+
+    return cn(
+      'absolute top-full z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+      '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',
+      alignClasses[this.align()],
+      this.class()
+    );
+  });
+
+  constructor() {
+    // Focus first item when menu opens
+    effect(() => {
+      if (this.menuContext.open()) {
+        setTimeout(() => {
+          this.updateMenuItems();
+          const focusedIdx = this.menuContext.focusedItemIndex();
+          if (focusedIdx >= 0 && this.menuItems[focusedIdx]) {
+            this.menuItems[focusedIdx].focus();
+          } else if (this.menuItems.length > 0) {
+            this.menuItems[0].focus();
+            this.menuContext.focusedItemIndex.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 'ArrowRight':
+        // Navigate to next menu in menubar
+        event.preventDefault();
+        this.close();
+        this.context.focusNextMenu();
+        break;
+      case 'ArrowLeft':
+        // Navigate to previous menu in menubar
+        event.preventDefault();
+        this.close();
+        this.context.focusPreviousMenu();
+        break;
+      case 'Home':
+        event.preventDefault();
+        this.focusFirst();
+        break;
+      case 'End':
+        event.preventDefault();
+        this.focusLast();
+        break;
+      case 'Tab':
+        // Close menu and let tab continue
+        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.menuContext.focusedItemIndex();
+    const nextIndex = currentIndex < this.menuItems.length - 1 ? currentIndex + 1 : 0;
+    this.focusItem(nextIndex);
+  }
+
+  private focusPrevious(): void {
+    const currentIndex = this.menuContext.focusedItemIndex();
+    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.menuContext.focusedItemIndex.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.menuContext.open.set(false);
+    this.context.activeMenu.set(null);
+    this.menuContext.focusedItemIndex.set(-1);
+  }
+
+  protected onDocumentClick(event: MouseEvent): void {
+    const target = event.target as HTMLElement;
+    const hostElement = this.elementRef.nativeElement;
+    const parent = hostElement.closest('MenubarMenu');
+
+    if (parent && !parent.contains(target)) {
+      this.close();
+    }
+  }
+
+  protected onEscapeKey(): void {
+    this.close();
+  }
+}

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

@@ -0,0 +1,63 @@
+import { InjectionToken, type WritableSignal } from '@angular/core';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/**
+ * Direction for menubar layout
+ */
+export type MenubarDirection = 'ltr' | 'rtl';
+
+/**
+ * Keyboard navigation direction
+ */
+export type MenubarNavigationDirection = 'horizontal' | 'vertical';
+
+// ============================================================================
+// Context Interfaces
+// ============================================================================
+
+/**
+ * Context value for the Menubar component
+ *
+ * @description
+ * Provides shared state and navigation methods for all menus within a menubar.
+ * Handles menu registration, focus management, and keyboard navigation.
+ */
+export interface MenubarContextValue {
+  /** Currently active/open menu ID */
+  activeMenu: WritableSignal<string | null>;
+  /** List of registered menu IDs */
+  menuIds: WritableSignal<string[]>;
+  /** Index of the currently focused menu */
+  focusedMenuIndex: WritableSignal<number>;
+  /** Register a menu with the menubar */
+  registerMenu: (menuId: string) => void;
+  /** Unregister a menu from the menubar */
+  unregisterMenu: (menuId: string) => void;
+  /** Focus the next menu (Right arrow) */
+  focusNextMenu: () => void;
+  /** Focus the previous menu (Left arrow) */
+  focusPreviousMenu: () => void;
+}
+
+export const MENUBAR_CONTEXT = new InjectionToken<MenubarContextValue>('MENUBAR_CONTEXT');
+
+/**
+ * Context value for individual MenubarMenu components
+ *
+ * @description
+ * Provides state for a single menu within the menubar, including
+ * its open state and focused item tracking.
+ */
+export interface MenubarMenuContextValue {
+  /** Unique identifier for this menu */
+  menuId: string;
+  /** Whether this menu is open */
+  open: WritableSignal<boolean>;
+  /** Index of the currently focused item within the menu */
+  focusedItemIndex: WritableSignal<number>;
+}
+
+export const MENUBAR_MENU_CONTEXT = new InjectionToken<MenubarMenuContextValue>('MENUBAR_MENU_CONTEXT');

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

@@ -0,0 +1,60 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
+import { MENUBAR_CONTEXT, MENUBAR_MENU_CONTEXT } from './menubar-context';
+
+/**
+ * MenubarItem component - individual menu item.
+ * Matches shadcn/ui React MenubarItem exactly.
+ * Supports roving tabindex for proper keyboard navigation.
+ */
+@Component({
+  selector: 'MenubarItem',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.role]': '"menuitem"',
+    '[attr.tabindex]': 'disabled() ? -1 : -1',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+    '[attr.aria-disabled]': 'disabled()',
+    '(click)': 'handleClick($event)',
+    '(keydown.enter)': 'handleClick($event)',
+    '(keydown.space)': 'handleClick($event)',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MenubarItem {
+  private readonly context = inject(MENUBAR_CONTEXT);
+  private readonly menuContext = inject(MENUBAR_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 */
+  readonly onSelect = output<void>();
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      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.menuContext.open.set(false);
+    this.context.activeMenu.set(null);
+    this.menuContext.focusedItemIndex.set(-1);
+  }
+}

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

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

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

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component, inject, OnDestroy, OnInit, signal } from '@angular/core';
+import { MENUBAR_CONTEXT, MENUBAR_MENU_CONTEXT, type MenubarMenuContextValue } from './menubar-context';
+
+let menuIdCounter = 0;
+
+/**
+ * MenubarMenu component - individual menu in the menubar.
+ * Matches shadcn/ui React MenubarMenu exactly.
+ * Registers itself with parent menubar for keyboard navigation.
+ */
+@Component({
+  selector: 'MenubarMenu',
+  template: `<ng-content />`,
+  providers: [
+    {
+      provide: MENUBAR_MENU_CONTEXT,
+      useFactory: (): MenubarMenuContextValue => ({
+        menuId: `menubar-menu-${menuIdCounter++}`,
+        open: signal(false),
+        focusedItemIndex: signal(-1),
+      }),
+    },
+  ],
+  host: {
+    class: 'relative',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MenubarMenu implements OnInit, OnDestroy {
+  protected readonly context = inject(MENUBAR_CONTEXT);
+  protected readonly menuContext = inject(MENUBAR_MENU_CONTEXT);
+
+  ngOnInit(): void {
+    this.context.registerMenu(this.menuContext.menuId);
+  }
+
+  ngOnDestroy(): void {
+    this.context.unregisterMenu(this.menuContext.menuId);
+  }
+}

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

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, InjectionToken, signal, type WritableSignal } from '@angular/core';
+
+export interface MenubarRadioGroupContext {
+  value: WritableSignal<string>;
+  setValue: (value: string) => void;
+}
+
+export const MENUBAR_RADIO_GROUP_CONTEXT = new InjectionToken<MenubarRadioGroupContext>(
+  'MENUBAR_RADIO_GROUP_CONTEXT'
+);
+
+/**
+ * MenubarRadioGroup component - group of radio items.
+ * Matches shadcn/ui React MenubarRadioGroup exactly.
+ */
+@Component({
+  selector: 'MenubarRadioGroup',
+  template: `<ng-content />`,
+  providers: [
+    {
+      provide: MENUBAR_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 MenubarRadioGroup {}

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

@@ -0,0 +1,66 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
+import { Circle, LucideAngularModule } from 'lucide-angular';
+import { MENUBAR_RADIO_GROUP_CONTEXT } from './menubar-radio-group.component';
+
+/**
+ * MenubarRadioItem component - radio menu item.
+ * Matches shadcn/ui React MenubarRadioItem exactly.
+ */
+@Component({
+  selector: 'MenubarRadioItem',
+  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.data-state]': 'isSelected() ? "checked" : "unchecked"',
+    '(click)': 'handleClick($event)',
+    '(keydown.enter)': 'handleClick($event)',
+    '(keydown.space)': 'handleClick($event)',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MenubarRadioItem {
+  private readonly radioGroupContext = inject(MENUBAR_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 */
+  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 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/menubar/menubar-separator.component.ts

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

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

@@ -0,0 +1,23 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * MenubarShortcut component - keyboard shortcut hint.
+ * Matches shadcn/ui React MenubarShortcut exactly.
+ */
+@Component({
+  selector: 'MenubarShortcut',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MenubarShortcut {
+  /** 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/menubar/menubar-sub-content.component.ts

@@ -0,0 +1,51 @@
+import { cn, Presence } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { MENUBAR_SUB_CONTEXT } from './menubar-sub.component';
+
+/**
+ * MenubarSubContent component - content panel for submenu.
+ * Matches shadcn/ui React MenubarSubContent exactly.
+ */
+@Component({
+  selector: 'MenubarSubContent',
+  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 MenubarSubContent {
+  protected readonly subContext = inject(MENUBAR_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',
+      this.class()
+    )
+  );
+
+  protected onMouseEnter(): void {
+    this.subContext.open.set(true);
+  }
+
+  protected onMouseLeave(): void {
+    this.subContext.open.set(false);
+  }
+}

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

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