@ng-cn/core 1.0.15 → 1.0.17

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

@@ -9,6 +9,7 @@ import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
   selector: 'DropdownMenuTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"dropdown-menu-trigger"',
     class: 'cursor-pointer',
     '(click)': 'toggle()',
     '(keydown)': 'onKeyDown($event)',
@@ -19,19 +20,19 @@ import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DropdownMenuTrigger {
+  private readonly _elementRef = inject(ElementRef<HTMLElement>);
+
   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);
+    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.triggerElement.set(this._elementRef.nativeElement);
         this.context.open.set(true);
         this.context.focusedIndex.set(0);
         break;

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

@@ -25,6 +25,7 @@ import { DROPDOWN_MENU_CONTEXT, type DropdownMenuContextValue } from './dropdown
     },
   ],
   host: {
+    'attr.data-slot': '"dropdown-menu"',
     class: 'relative inline-block',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -4,13 +4,20 @@ export { DROPDOWN_MENU_CONTEXT, type DropdownMenuContextValue } from './dropdown
 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 {
+  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 {
+  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

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * EmptyAction component - container for action buttons in empty state.
@@ -22,7 +17,5 @@ export class EmptyAction {
   readonly class = input<string>('');
 
   /** Computed class combining base styles and custom classes */
-  protected readonly computedClass = computed(() =>
-    cn('mt-2', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('mt-2', this.class()));
 }

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

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * EmptyDescription component - description for the empty state.
@@ -23,9 +18,6 @@ export class EmptyDescription {
 
   /** 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()
-    )
+    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

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * EmptyIcon component - container for the empty state icon.
@@ -25,7 +20,7 @@ export class EmptyIcon {
   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()
-    )
+      this.class(),
+    ),
   );
 }

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

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * EmptyTitle component - title for the empty state.
@@ -22,7 +17,5 @@ export class EmptyTitle {
   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())
-  );
+  protected readonly computedClass = computed(() => cn('mt-4 text-lg font-semibold', this.class()));
 }

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

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Empty component - empty state placeholder for when there's no content.
@@ -47,7 +42,7 @@ export class Empty {
   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()
-    )
+      this.class(),
+    ),
   );
 }

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

@@ -3,4 +3,3 @@ 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

@@ -1,10 +1,6 @@
 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>;
@@ -23,12 +19,6 @@ export interface FormContext {
   form: WritableSignal<FormGroup | null>;
 }
 
-// ============================================================================
-// Injection Tokens
-// ============================================================================
-
-export const FORM_FIELD_CONTEXT = new InjectionToken<FormFieldContext>(
-  'FormFieldContext'
-);
+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

@@ -1,15 +1,15 @@
 import { cn } from '@/lib/utils';
 import {
-    AfterContentInit,
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    ContentChild,
-    DestroyRef,
-    Directive,
-    ElementRef,
-    inject,
-    input,
+  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';
@@ -44,14 +44,14 @@ export class FormControlInput {
   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;
+  readonly inputDirective = contentChild(FormControlInput);
 
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
 
+  private readonly _destroyRef = inject(DestroyRef);
+  protected readonly fieldContext = inject(FORM_FIELD_CONTEXT, { optional: true });
+
   /** Check if field has error */
   protected readonly hasError = computed(() => {
     const control = this.fieldContext?.control();
@@ -74,18 +74,17 @@ export class FormControl implements AfterContentInit {
   });
 
   /** Computed class combining base styles and custom classes */
-  protected readonly computedClass = computed(() =>
-    cn('relative', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('relative', this.class()));
 
   ngAfterContentInit(): void {
     this.applyAccessibilityAttributes();
   }
 
   private applyAccessibilityAttributes(): void {
-    if (!this.inputDirective || !this.fieldContext) return;
+    const inputDirective = this.inputDirective();
+    if (!inputDirective || !this.fieldContext) return;
 
-    const element = this.inputDirective.elementRef.nativeElement;
+    const element = inputDirective.elementRef.nativeElement;
 
     // Set the id to match the label's 'for' attribute
     const id = this.fieldContext.id();
@@ -107,15 +106,16 @@ export class FormControl implements AfterContentInit {
     // Update attributes when control state changes
     const control = this.fieldContext.control();
     if (control?.statusChanges) {
-      control.statusChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+      control.statusChanges.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
         this.updateAriaInvalid();
       });
     }
   }
 
   private updateAriaInvalid(): void {
-    if (!this.inputDirective) return;
-    const element = this.inputDirective.elementRef.nativeElement;
+    const inputDirective = this.inputDirective();
+    if (!inputDirective) return;
+    const element = inputDirective.elementRef.nativeElement;
 
     if (this.hasError()) {
       element.setAttribute('aria-invalid', 'true');

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

@@ -1,11 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { FORM_FIELD_CONTEXT } from './form-context';
 
 /**
@@ -25,13 +19,13 @@ import { FORM_FIELD_CONTEXT } from './form-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FormDescription {
-  protected readonly fieldContext = inject(FORM_FIELD_CONTEXT, { optional: true });
-
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
 
+  protected readonly fieldContext = inject(FORM_FIELD_CONTEXT, { optional: true });
+
   /** Computed class combining base styles and custom classes */
   protected readonly computedClass = computed(() =>
-    cn('text-muted-foreground text-[0.8rem]', this.class())
+    cn('text-muted-foreground text-[0.8rem]', this.class()),
   );
 }

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

@@ -41,14 +41,17 @@ import { FORM_CONTEXT, FORM_FIELD_CONTEXT, type FormFieldContext } from './form-
   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>('');
 
+  private readonly _formContext = inject(FORM_CONTEXT, { optional: true });
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() => cn('space-y-2', this.class()));
+
   /** Generate unique IDs */
   private readonly uniqueId = `form-field-${Math.random().toString(36).substring(7)}`;
 
@@ -61,22 +64,16 @@ export class FormField {
     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();
+    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();
+    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

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * FormItem component - container for form field elements.
@@ -33,10 +28,5 @@ export class FormItem {
   readonly class = input<string>('');
 
   /** Computed class combining base styles and custom classes */
-  protected readonly computedClass = computed(() =>
-    cn(
-      'flex flex-col gap-2',
-      this.class()
-    )
-  );
+  protected readonly computedClass = computed(() => cn('flex flex-col gap-2', this.class()));
 }

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

@@ -1,12 +1,12 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    ElementRef,
-    inject,
-    input,
-    viewChild
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  input,
+  viewChild,
 } from '@angular/core';
 import { FORM_FIELD_CONTEXT } from './form-context';
 
@@ -19,40 +19,40 @@ import { FORM_FIELD_CONTEXT } from './form-context';
  */
 @Component({
   selector: 'FormLabel',
-  template: `<label #labelElement [attr.for]="fieldContext?.id()" [class]="computedClass()"><ng-content /></label>`,
+  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',
+    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>('');
 
+  protected readonly fieldContext = inject(FORM_FIELD_CONTEXT, { optional: true });
+
   /** 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()
-    )
+      this.class(),
+    ),
   );
 }

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

@@ -1,11 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { FORM_FIELD_CONTEXT } from './form-context';
 
 /**
@@ -36,20 +30,16 @@ import { FORM_FIELD_CONTEXT } from './form-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FormMessage {
-  protected readonly fieldContext = inject(FORM_FIELD_CONTEXT, { optional: true });
-
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
 
-  /** Whether component has projected content */
-  hasContent = false;
+  protected readonly fieldContext = inject(FORM_FIELD_CONTEXT, { optional: true });
 
   /** Check if field has error */
   protected readonly hasError = computed(() => {
     const control = this.fieldContext?.control();
     return control?.invalid && (control?.dirty || control?.touched);
   });
-
   /** Get first error message */
   protected readonly errorMessage = computed(() => {
     const control = this.fieldContext?.control();
@@ -90,16 +80,18 @@ export class FormMessage {
         return 'Invalid value';
     }
   });
-
   /** Computed class combining base styles and custom classes */
   protected readonly computedClass = computed(() =>
     cn(
       'text-destructive text-[0.8rem] font-medium',
       !this.hasError() && !this.hasContent && 'hidden',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
+  /** Whether component has projected content */
+  hasContent = false;
+
   ngAfterContentInit() {
     // Check if there's projected content
     // This is a simplified check - in production you might want to use ContentChild

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

@@ -1,19 +1,15 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    forwardRef,
-    input,
-    signal,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  signal,
 } from '@angular/core';
 import { FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { FORM_CONTEXT, type FormContext } from './form-context';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 /**
  * Props for the Form component
  */
@@ -24,10 +20,6 @@ export interface FormProps {
   class?: string;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component Form
  *
@@ -103,20 +95,17 @@ export interface FormProps {
 export class Form {
   /** The reactive form group */
   readonly formGroup = input<FormGroup | null>(null);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() => cn('space-y-6', this.class()));
+
   /** Context for child components */
   readonly context: FormContext = {
     form: signal(this.formGroup()),
   };
 
-  /** Computed class combining base styles and custom classes */
-  protected readonly computedClass = computed(() =>
-    cn('space-y-6', this.class())
-  );
-
   ngOnChanges() {
     this.context.form.set(this.formGroup());
   }

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

@@ -1,9 +1,9 @@
 // Context and types
 export {
-    FORM_CONTEXT,
-    FORM_FIELD_CONTEXT,
-    type FormContext,
-    type FormFieldContext
+  FORM_CONTEXT,
+  FORM_FIELD_CONTEXT,
+  type FormContext,
+  type FormFieldContext,
 } from './form-context';
 
 // Components and their types
@@ -14,4 +14,3 @@ export { FormItem } from './form-item.component';
 export { FormLabel } from './form-label.component';
 export { FormMessage } from './form-message.component';
 export { Form, type FormProps } from './form.component';
-