@ng-cn/core 1.0.11 → 1.0.12

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

@@ -0,0 +1,63 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
+import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
+
+/**
+ * ContextMenuItem component - a single item in the context menu.
+ * Matches shadcn/ui React ContextMenuItem exactly.
+ * Supports roving tabindex for proper keyboard navigation.
+ */
+@Component({
+  selector: 'ContextMenuItem',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.role]': '"menuitem"',
+    '[attr.tabindex]': 'disabled() ? -1 : -1',
+    '[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 ContextMenuItem {
+  private readonly context = inject(CONTEXT_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",
+      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);
+    this.context.focusedIndex.set(-1);
+    // Restore focus to trigger element
+    const triggerEl = this.context.triggerElement();
+    if (triggerEl) {
+      triggerEl.focus();
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * ContextMenuLabel component - a label in the context menu.
+ * Matches shadcn/ui React ContextMenuLabel exactly.
+ */
+@Component({
+  selector: 'ContextMenuLabel',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ContextMenuLabel {
+  /** 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-2 py-1.5 text-sm font-semibold text-foreground',
+      this.inset() && 'pl-8',
+      this.class()
+    )
+  );
+}

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

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

package/src/app/lib/components/ui/context-menu/context-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 { CONTEXT_MENU_CONTEXT } from './context-menu-context';
+import { CONTEXT_MENU_RADIO_GROUP_CONTEXT } from './context-menu-radio-group.component';
+
+/**
+ * ContextMenuRadioItem component - a radio item in the context menu.
+ * Matches shadcn/ui React ContextMenuRadioItem exactly.
+ */
+@Component({
+  selector: 'ContextMenuRadioItem',
+  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 ContextMenuRadioItem {
+  private readonly context = inject(CONTEXT_MENU_CONTEXT);
+  private readonly radioGroupContext = inject(CONTEXT_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 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/context-menu/context-menu-separator.component.ts

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

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

@@ -0,0 +1,23 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * ContextMenuShortcut component - displays keyboard shortcut hint.
+ * Matches shadcn/ui React ContextMenuShortcut exactly.
+ */
+@Component({
+  selector: 'ContextMenuShortcut',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ContextMenuShortcut {
+  /** 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/context-menu/context-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 { CONTEXT_MENU_SUB_CONTEXT } from './context-menu-sub.component';
+
+/**
+ * ContextMenuSubContent component - content panel for submenu.
+ * Matches shadcn/ui React ContextMenuSubContent exactly.
+ */
+@Component({
+  selector: 'ContextMenuSubContent',
+  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 ContextMenuSubContent {
+  protected readonly subContext = inject(CONTEXT_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',
+      this.class()
+    )
+  );
+
+  protected onMouseEnter(): void {
+    this.subContext.open.set(true);
+  }
+
+  protected onMouseLeave(): void {
+    this.subContext.open.set(false);
+  }
+}

package/src/app/lib/components/ui/context-menu/context-menu-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 { CONTEXT_MENU_SUB_CONTEXT } from './context-menu-sub.component';
+
+/**
+ * ContextMenuSubTrigger component - trigger for submenu.
+ * Matches shadcn/ui React ContextMenuSubTrigger exactly.
+ */
+@Component({
+  selector: 'ContextMenuSubTrigger',
+  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 ContextMenuSubTrigger {
+  protected readonly subContext = inject(CONTEXT_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 focus:text-accent-foreground 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 {
+    // Keep open to allow mouse movement to subcontent
+  }
+}

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

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

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

@@ -0,0 +1,51 @@
+import { ChangeDetectionStrategy, Component, ElementRef, inject } from '@angular/core';
+import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
+
+/**
+ * ContextMenuTrigger component - the area that responds to right-click.
+ * Matches shadcn/ui React ContextMenuTrigger exactly.
+ * Supports keyboard trigger via Shift+F10.
+ */
+@Component({
+  selector: 'ContextMenuTrigger',
+  template: `<ng-content />`,
+  host: {
+    '[attr.tabindex]': '0',
+    '(contextmenu)': 'onContextMenu($event)',
+    '(keydown)': 'onKeydown($event)',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ContextMenuTrigger {
+  protected readonly context = inject(CONTEXT_MENU_CONTEXT);
+  private readonly elementRef = inject(ElementRef);
+
+  protected onContextMenu(event: MouseEvent): void {
+    event.preventDefault();
+    this.context.position.set({ x: event.clientX, y: event.clientY });
+    this.context.triggerElement.set(this.elementRef.nativeElement);
+    this.context.focusedIndex.set(-1);
+    this.context.open.set(true);
+  }
+
+  protected onKeydown(event: KeyboardEvent): void {
+    // Shift+F10 opens context menu (Windows convention)
+    if (event.key === 'F10' && event.shiftKey) {
+      event.preventDefault();
+      const rect = this.elementRef.nativeElement.getBoundingClientRect();
+      this.context.position.set({ x: rect.left, y: rect.bottom });
+      this.context.triggerElement.set(this.elementRef.nativeElement);
+      this.context.focusedIndex.set(-1);
+      this.context.open.set(true);
+    }
+    // Also support ContextMenu key
+    if (event.key === 'ContextMenu') {
+      event.preventDefault();
+      const rect = this.elementRef.nativeElement.getBoundingClientRect();
+      this.context.position.set({ x: rect.left, y: rect.bottom });
+      this.context.triggerElement.set(this.elementRef.nativeElement);
+      this.context.focusedIndex.set(-1);
+      this.context.open.set(true);
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { CONTEXT_MENU_CONTEXT, type ContextMenuContextValue } from './context-menu-context';
+
+/**
+ * ContextMenu component - root container for context menu.
+ * Matches shadcn/ui React ContextMenu exactly.
+ */
+@Component({
+  selector: 'ContextMenu',
+  template: `<ng-content />`,
+  providers: [
+    {
+      provide: CONTEXT_MENU_CONTEXT,
+      useFactory: (): ContextMenuContextValue => ({
+        open: signal(false),
+        position: signal({ x: 0, y: 0 }),
+        focusedIndex: signal(-1),
+        triggerElement: signal(null),
+      }),
+    },
+  ],
+  host: {
+    class: 'relative inline-block',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ContextMenu {}

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

@@ -0,0 +1,15 @@
+export { ContextMenuCheckboxItem } from './context-menu-checkbox-item.component';
+export { ContextMenuContent } from './context-menu-content.component';
+export { CONTEXT_MENU_CONTEXT, type ContextMenuContextValue, type ContextMenuPosition } from './context-menu-context';
+export { ContextMenuItem } from './context-menu-item.component';
+export { ContextMenuLabel } from './context-menu-label.component';
+export { CONTEXT_MENU_RADIO_GROUP_CONTEXT, ContextMenuRadioGroup, type ContextMenuRadioGroupContext } from './context-menu-radio-group.component';
+export { ContextMenuRadioItem } from './context-menu-radio-item.component';
+export { ContextMenuSeparator } from './context-menu-separator.component';
+export { ContextMenuShortcut } from './context-menu-shortcut.component';
+export { ContextMenuSubContent } from './context-menu-sub-content.component';
+export { ContextMenuSubTrigger } from './context-menu-sub-trigger.component';
+export { CONTEXT_MENU_SUB_CONTEXT, ContextMenuSub, type ContextMenuSubContext } from './context-menu-sub.component';
+export { ContextMenuTrigger } from './context-menu-trigger.component';
+export { ContextMenu } from './context-menu.component';
+