@ng-cn/core 1.0.11 → 1.0.12

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

@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component, ElementRef, inject } from '@angular/core';
+import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
+
+/**
+ * DropdownMenuTrigger component - the trigger that opens the dropdown.
+ * Matches shadcn/ui React DropdownMenuTrigger exactly.
+ */
+@Component({
+  selector: 'DropdownMenuTrigger',
+  template: `<ng-content />`,
+  host: {
+    class: 'cursor-pointer',
+    '(click)': 'toggle()',
+    '(keydown)': 'onKeyDown($event)',
+    '[attr.aria-expanded]': 'context.open()',
+    '[attr.aria-haspopup]': '"menu"',
+    '[attr.aria-controls]': 'context.open() ? context.contentId : null',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DropdownMenuTrigger {
+  protected readonly context = inject(DROPDOWN_MENU_CONTEXT);
+  private readonly elementRef = inject(ElementRef<HTMLElement>);
+
+  toggle(): void {
+    this.context.triggerElement.set(this.elementRef.nativeElement);
+    this.context.open.update(v => !v);
+  }
+
+  onKeyDown(event: KeyboardEvent): void {
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.context.triggerElement.set(this.elementRef.nativeElement);
+        this.context.open.set(true);
+        this.context.focusedIndex.set(0);
+        break;
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        this.toggle();
+        break;
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+import { AriaIdService } from '@/lib/utils/accessibility';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { DROPDOWN_MENU_CONTEXT, type DropdownMenuContextValue } from './dropdown-menu-context';
+
+/**
+ * DropdownMenu component - root container for dropdown menu.
+ * Matches shadcn/ui React DropdownMenu exactly.
+ */
+@Component({
+  selector: 'DropdownMenu',
+  template: `<ng-content />`,
+  providers: [
+    {
+      provide: DROPDOWN_MENU_CONTEXT,
+      useFactory: (ariaIdService: AriaIdService): DropdownMenuContextValue => {
+        const menuIds = ariaIdService.generateMenuIds('dropdown-menu');
+        return {
+          open: signal(false),
+          contentId: menuIds.contentId,
+          triggerElement: signal(null),
+          focusedIndex: signal(-1),
+        };
+      },
+      deps: [AriaIdService],
+    },
+  ],
+  host: {
+    class: 'relative inline-block',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DropdownMenu {}

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

@@ -0,0 +1,16 @@
+export { DropdownMenuCheckboxItem } from './dropdown-menu-checkbox-item.component';
+export { DropdownMenuContent } from './dropdown-menu-content.component';
+export { DROPDOWN_MENU_CONTEXT, type DropdownMenuContextValue } from './dropdown-menu-context';
+export { DropdownMenuGroup } from './dropdown-menu-group.component';
+export { DropdownMenuItem } from './dropdown-menu-item.component';
+export { DropdownMenuLabel } from './dropdown-menu-label.component';
+export { DROPDOWN_MENU_RADIO_GROUP_CONTEXT, DropdownMenuRadioGroup, type DropdownMenuRadioGroupContext } from './dropdown-menu-radio-group.component';
+export { DropdownMenuRadioItem } from './dropdown-menu-radio-item.component';
+export { DropdownMenuSeparator } from './dropdown-menu-separator.component';
+export { DropdownMenuShortcut } from './dropdown-menu-shortcut.component';
+export { DropdownMenuSubContent } from './dropdown-menu-sub-content.component';
+export { DropdownMenuSubTrigger } from './dropdown-menu-sub-trigger.component';
+export { DROPDOWN_MENU_SUB_CONTEXT, DropdownMenuSub, type DropdownMenuSubContext } from './dropdown-menu-sub.component';
+export { DropdownMenuTrigger } from './dropdown-menu-trigger.component';
+export { DropdownMenu } from './dropdown-menu.component';
+

package/src/app/lib/components/ui/empty/empty-action.component.ts

@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * EmptyAction component - container for action buttons in empty state.
+ */
+@Component({
+  selector: 'EmptyAction',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EmptyAction {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('mt-2', this.class())
+  );
+}

package/src/app/lib/components/ui/empty/empty-description.component.ts

@@ -0,0 +1,31 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * EmptyDescription component - description for the empty state.
+ */
+@Component({
+  selector: 'EmptyDescription',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EmptyDescription {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      'mb-4 mt-2 text-sm text-muted-foreground max-w-sm mx-auto',
+      this.class()
+    )
+  );
+}

package/src/app/lib/components/ui/empty/empty-icon.component.ts

@@ -0,0 +1,31 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * EmptyIcon component - container for the empty state icon.
+ */
+@Component({
+  selector: 'EmptyIcon',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EmptyIcon {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      'mx-auto flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground [&>svg]:size-6',
+      this.class()
+    )
+  );
+}

package/src/app/lib/components/ui/empty/empty-title.component.ts

@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * EmptyTitle component - title for the empty state.
+ */
+@Component({
+  selector: 'EmptyTitle',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EmptyTitle {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('mt-4 text-lg font-semibold', this.class())
+  );
+}

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

@@ -0,0 +1,53 @@
+import { cn } from '@/lib/utils';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+
+/**
+ * Empty component - empty state placeholder for when there's no content.
+ *
+ * @example
+ * <!-- Basic empty state -->
+ * <Empty>
+ *   <EmptyIcon>
+ *     <svg>...</svg>
+ *   </EmptyIcon>
+ *   <EmptyTitle>No results found</EmptyTitle>
+ *   <EmptyDescription>Try adjusting your search or filters.</EmptyDescription>
+ * </Empty>
+ *
+ * <!-- With action -->
+ * <Empty>
+ *   <EmptyIcon>
+ *     <svg>...</svg>
+ *   </EmptyIcon>
+ *   <EmptyTitle>No projects yet</EmptyTitle>
+ *   <EmptyDescription>Create your first project to get started.</EmptyDescription>
+ *   <EmptyAction>
+ *     <Button>Create Project</Button>
+ *   </EmptyAction>
+ * </Empty>
+ */
+@Component({
+  selector: 'Empty',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Empty {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex min-h-[400px] flex-col items-center justify-center rounded-md border border-dashed p-8 text-center animate-in fade-in-50',
+      this.class()
+    )
+  );
+}

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

@@ -0,0 +1,6 @@
+export { EmptyAction } from './empty-action.component';
+export { EmptyDescription } from './empty-description.component';
+export { EmptyIcon } from './empty-icon.component';
+export { EmptyTitle } from './empty-title.component';
+export { Empty } from './empty.component';
+

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

@@ -0,0 +1,34 @@
+import { InjectionToken, WritableSignal } from '@angular/core';
+import { AbstractControl, FormGroup } from '@angular/forms';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface FormFieldContext {
+  /** The name of the form field */
+  name: WritableSignal<string>;
+  /** The form control for this field */
+  control: WritableSignal<AbstractControl | null>;
+  /** Unique ID for the form control element */
+  id: WritableSignal<string>;
+  /** ID for the form description element */
+  formDescriptionId: WritableSignal<string>;
+  /** ID for the form message element */
+  formMessageId: WritableSignal<string>;
+}
+
+export interface FormContext {
+  /** The reactive form group */
+  form: WritableSignal<FormGroup | null>;
+}
+
+// ============================================================================
+// Injection Tokens
+// ============================================================================
+
+export const FORM_FIELD_CONTEXT = new InjectionToken<FormFieldContext>(
+  'FormFieldContext'
+);
+
+export const FORM_CONTEXT = new InjectionToken<FormContext>('FormContext');

package/src/app/lib/components/ui/form/form-control.component.ts

@@ -0,0 +1,137 @@
+import { cn } from '@/lib/utils';
+import {
+    AfterContentInit,
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    ContentChild,
+    DestroyRef,
+    Directive,
+    ElementRef,
+    inject,
+    input,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FORM_FIELD_CONTEXT } from './form-context';
+
+/**
+ * Directive applied to form inputs within FormControl.
+ * Automatically sets id, aria-describedby, and aria-invalid attributes.
+ */
+@Directive({
+  selector: 'input, select, textarea, [formControlInput]',
+})
+export class FormControlInput {
+  readonly elementRef = inject(ElementRef<HTMLInputElement>);
+}
+
+/**
+ * FormControl component - wrapper for form input elements.
+ * Automatically applies accessibility attributes to child inputs.
+ *
+ * @example
+ * <FormControl>
+ *   <input type="email" formControlName="email" />
+ * </FormControl>
+ */
+@Component({
+  selector: 'FormControl',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    'data-slot': 'form-control',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormControl implements AfterContentInit {
+  protected readonly fieldContext = inject(FORM_FIELD_CONTEXT, { optional: true });
+  private readonly destroyRef = inject(DestroyRef);
+
+  @ContentChild(FormControlInput, { static: false }) inputDirective?: FormControlInput;
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Check if field has error */
+  protected readonly hasError = computed(() => {
+    const control = this.fieldContext?.control();
+    return control?.invalid && (control?.dirty || control?.touched);
+  });
+
+  /** Compute aria-describedby attribute */
+  protected readonly ariaDescribedBy = computed(() => {
+    const descId = this.fieldContext?.formDescriptionId();
+    const msgId = this.fieldContext?.formMessageId();
+    const hasError = this.hasError();
+
+    if (!descId && !msgId) return null;
+
+    const parts: string[] = [];
+    if (descId) parts.push(descId);
+    if (hasError && msgId) parts.push(msgId);
+
+    return parts.join(' ') || null;
+  });
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('relative', this.class())
+  );
+
+  ngAfterContentInit(): void {
+    this.applyAccessibilityAttributes();
+  }
+
+  private applyAccessibilityAttributes(): void {
+    if (!this.inputDirective || !this.fieldContext) return;
+
+    const element = this.inputDirective.elementRef.nativeElement;
+
+    // Set the id to match the label's 'for' attribute
+    const id = this.fieldContext.id();
+    if (id) {
+      element.setAttribute('id', id);
+    }
+
+    // Apply aria-describedby
+    const describedBy = this.ariaDescribedBy();
+    if (describedBy) {
+      element.setAttribute('aria-describedby', describedBy);
+    }
+
+    // Apply aria-invalid when there's an error
+    if (this.hasError()) {
+      element.setAttribute('aria-invalid', 'true');
+    }
+
+    // Update attributes when control state changes
+    const control = this.fieldContext.control();
+    if (control?.statusChanges) {
+      control.statusChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+        this.updateAriaInvalid();
+      });
+    }
+  }
+
+  private updateAriaInvalid(): void {
+    if (!this.inputDirective) return;
+    const element = this.inputDirective.elementRef.nativeElement;
+
+    if (this.hasError()) {
+      element.setAttribute('aria-invalid', 'true');
+      const describedBy = this.ariaDescribedBy();
+      if (describedBy) {
+        element.setAttribute('aria-describedby', describedBy);
+      }
+    } else {
+      element.removeAttribute('aria-invalid');
+      // Keep description but remove message ID from describedby
+      const descId = this.fieldContext?.formDescriptionId();
+      if (descId) {
+        element.setAttribute('aria-describedby', descId);
+      } else {
+        element.removeAttribute('aria-describedby');
+      }
+    }
+  }
+}

package/src/app/lib/components/ui/form/form-description.component.ts

@@ -0,0 +1,37 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+} from '@angular/core';
+import { FORM_FIELD_CONTEXT } from './form-context';
+
+/**
+ * FormDescription component - helper text for a form field.
+ *
+ * @example
+ * <FormDescription>Enter your email address</FormDescription>
+ */
+@Component({
+  selector: 'FormDescription',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.id]': 'fieldContext?.formDescriptionId()',
+    'data-slot': 'form-description',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormDescription {
+  protected readonly fieldContext = inject(FORM_FIELD_CONTEXT, { optional: true });
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('text-muted-foreground text-[0.8rem]', this.class())
+  );
+}

package/src/app/lib/components/ui/form/form-field.component.ts

@@ -0,0 +1,84 @@
+import { cn } from '@/lib/utils';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  inject,
+  input,
+  signal,
+} from '@angular/core';
+import { FORM_CONTEXT, FORM_FIELD_CONTEXT, type FormFieldContext } from './form-context';
+
+/**
+ * FormField component - provides context for a single form field.
+ *
+ * @example
+ * <FormField name="email">
+ *   <FormItem>
+ *     <FormLabel>Email</FormLabel>
+ *     <FormControl>
+ *       <Input type="email" formControlName="email" />
+ *     </FormControl>
+ *     <FormMessage />
+ *   </FormItem>
+ * </FormField>
+ */
+@Component({
+  selector: 'FormField',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    'data-slot': 'form-field',
+  },
+  providers: [
+    {
+      provide: FORM_FIELD_CONTEXT,
+      useFactory: (component: FormField) => component.fieldContext,
+      deps: [forwardRef(() => FormField)],
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormField {
+  private readonly formContext = inject(FORM_CONTEXT, { optional: true });
+
+  /** The name of the form control */
+  readonly name = input.required<string>();
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Generate unique IDs */
+  private readonly uniqueId = `form-field-${Math.random().toString(36).substring(7)}`;
+
+  /** Context for child components */
+  readonly fieldContext: FormFieldContext = {
+    name: signal(''),
+    control: signal(null),
+    id: signal(this.uniqueId),
+    formDescriptionId: signal(`${this.uniqueId}-description`),
+    formMessageId: signal(`${this.uniqueId}-message`),
+  };
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('space-y-2', this.class())
+  );
+
+  ngOnInit() {
+    this.fieldContext.name.set(this.name());
+    const form = this.formContext?.form();
+    if (form) {
+      this.fieldContext.control.set(form.get(this.name()));
+    }
+  }
+
+  ngOnChanges() {
+    this.fieldContext.name.set(this.name());
+    const form = this.formContext?.form();
+    if (form) {
+      this.fieldContext.control.set(form.get(this.name()));
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * FormItem component - container for form field elements.
+ *
+ * @example
+ * <FormItem>
+ *   <FormLabel>Email</FormLabel>
+ *   <FormControl>
+ *     <Input type="email" />
+ *   </FormControl>
+ *   <FormDescription>Enter your email</FormDescription>
+ *   <FormMessage />
+ * </FormItem>
+ */
+@Component({
+  selector: 'FormItem',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    'data-slot': 'form-item',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormItem {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex flex-col gap-2',
+      this.class()
+    )
+  );
+}

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

@@ -0,0 +1,58 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    ElementRef,
+    inject,
+    input,
+    viewChild
+} from '@angular/core';
+import { FORM_FIELD_CONTEXT } from './form-context';
+
+/**
+ * FormLabel component - accessible label for form fields.
+ * Uses a native <label> element to ensure clicking focuses the associated input.
+ *
+ * @example
+ * <FormLabel>Email</FormLabel>
+ */
+@Component({
+  selector: 'FormLabel',
+  template: `<label #labelElement [attr.for]="fieldContext?.id()" [class]="computedClass()"><ng-content /></label>`,
+  host: {
+    '[attr.data-error]': 'hasError() ? "" : null',
+    '[attr.data-disabled]': 'isDisabled() ? "" : null',
+    'data-slot': 'form-label',
+    'class': 'contents',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormLabel {
+  protected readonly fieldContext = inject(FORM_FIELD_CONTEXT, { optional: true });
+
+  private readonly labelElement = viewChild<ElementRef<HTMLLabelElement>>('labelElement');
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Check if field has error */
+  protected readonly hasError = computed(() => {
+    const control = this.fieldContext?.control();
+    return control?.invalid && (control?.dirty || control?.touched);
+  });
+
+  /** Check if field is disabled */
+  protected readonly isDisabled = computed(() => {
+    return this.fieldContext?.control()?.disabled;
+  });
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex items-center gap-2 text-sm font-medium leading-none select-none cursor-pointer group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+      this.hasError() && 'text-destructive',
+      this.class()
+    )
+  );
+}