@ng-cn/core 1.0.15 → 1.0.17

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

@@ -1,19 +1,15 @@
 import { cn, Presence } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    ElementRef,
-    inject,
-    input,
-    OnDestroy,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  input,
+  OnDestroy,
 } from '@angular/core';
 import { HOVER_CARD_CONTEXT, HoverCardAlign, HoverCardSide } from './hover-card-context';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type HoverCardContentState = 'open' | 'closed';
 
 /**
@@ -33,10 +29,6 @@ export interface HoverCardContentProps {
   class?: string;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component HoverCardContent
  *
@@ -101,32 +93,24 @@ export interface HoverCardContentProps {
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"hover-card-content"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HoverCardContent implements OnDestroy {
-  protected readonly context = inject(HOVER_CARD_CONTEXT);
-  private readonly elementRef = inject(ElementRef<HTMLElement>);
-
   /** The preferred side of the trigger to render against */
   readonly side = input<HoverCardSide>('bottom');
-
   /** The distance in pixels from the trigger */
   readonly sideOffset = input<number>(4);
-
   /** The preferred alignment against the trigger */
   readonly align = input<HoverCardAlign>('center');
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  private closeTimeout: ReturnType<typeof setTimeout> | null = null;
+  private readonly _elementRef = inject(ElementRef<HTMLElement>);
 
-  /** Current state: open or closed */
-  protected readonly state = computed<HoverCardContentState>(() =>
-    this.context.open() ? 'open' : 'closed'
-  );
+  protected readonly context = inject(HOVER_CARD_CONTEXT);
 
   protected readonly computedClass = computed(() => {
     const sideClasses = {
@@ -151,10 +135,16 @@ export class HoverCardContent implements OnDestroy {
       'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       sideClasses[this.side()],
       this.side() === 'top' || this.side() === 'bottom' ? alignClasses[this.align()] : '',
-      this.class()
+      this.class(),
     );
   });
 
+  private closeTimeout: ReturnType<typeof setTimeout> | null = null;
+  /** Current state: open or closed */
+  protected readonly state = computed<HoverCardContentState>(() =>
+    this.context.open() ? 'open' : 'closed',
+  );
+
   ngOnDestroy(): void {
     this.clearTimeout();
   }
@@ -162,20 +152,17 @@ export class HoverCardContent implements OnDestroy {
   onMouseEnter(): void {
     this.clearTimeout();
   }
-
   onMouseLeave(): void {
     this.closeTimeout = setTimeout(() => {
       this.context.setOpen(false);
     }, this.context.closeDelay);
   }
-
   onFocusIn(): void {
     this.clearTimeout();
   }
-
   onFocusOut(event: FocusEvent): void {
     const relatedTarget = event.relatedTarget as HTMLElement | null;
-    const trigger = this.elementRef.nativeElement.parentElement?.querySelector('[data-state]');
+    const trigger = this._elementRef.nativeElement.parentElement?.querySelector('[data-state]');
 
     // Check if focus moved to trigger or stayed within content
     if (relatedTarget && (trigger === relatedTarget || trigger?.contains(relatedTarget))) {
@@ -186,11 +173,12 @@ export class HoverCardContent implements OnDestroy {
       this.context.setOpen(false);
     }, this.context.closeDelay);
   }
-
   onEscape(): void {
     this.context.setOpen(false);
     // Return focus to trigger
-    const trigger = this.elementRef.nativeElement.parentElement?.querySelector('[data-state]') as HTMLElement;
+    const trigger = this._elementRef.nativeElement.parentElement?.querySelector(
+      '[data-state]',
+    ) as HTMLElement;
     trigger?.focus();
   }
 

package/src/app/lib/components/ui/hover-card/hover-card-context.ts

@@ -1,9 +1,5 @@
 import { InjectionToken, WritableSignal } from '@angular/core';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type HoverCardSide = 'top' | 'right' | 'bottom' | 'left';
 export type HoverCardAlign = 'start' | 'center' | 'end';
 
@@ -18,8 +14,4 @@ export interface HoverCardContextValue {
   closeDelay: number;
 }
 
-// ============================================================================
-// Injection Tokens
-// ============================================================================
-
 export const HOVER_CARD_CONTEXT = new InjectionToken<HoverCardContextValue>('HOVER_CARD_CONTEXT');

package/src/app/lib/components/ui/hover-card/hover-card-trigger.component.ts

@@ -1,17 +1,13 @@
 import {
-    ChangeDetectionStrategy,
-    Component,
-    ElementRef,
-    inject,
-    input,
-    OnDestroy,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  inject,
+  input,
+  OnDestroy,
 } from '@angular/core';
 import { HOVER_CARD_CONTEXT } from './hover-card-context';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 /**
  * Props for the HoverCardTrigger component
  */
@@ -21,10 +17,6 @@ export interface HoverCardTriggerProps {
   asChild?: boolean;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component HoverCardTrigger
  *
@@ -72,8 +64,9 @@ export interface HoverCardTriggerProps {
   selector: 'HoverCardTrigger',
   template: `<ng-content />`,
   host: {
-    'tabindex': '0',
-    'role': 'button',
+    'attr.data-slot': '"hover-card-trigger"',
+    tabindex: '0',
+    role: 'button',
     '(mouseenter)': 'onMouseEnter()',
     '(mouseleave)': 'onMouseLeave()',
     '(focus)': 'onFocus()',
@@ -88,12 +81,13 @@ export interface HoverCardTriggerProps {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HoverCardTrigger implements OnDestroy {
-  protected readonly context = inject(HOVER_CARD_CONTEXT);
-  private readonly elementRef = inject(ElementRef<HTMLElement>);
-
   /** Change the default rendered element for the one passed as a child */
   readonly asChild = input<boolean>(false);
 
+  private readonly _elementRef = inject(ElementRef<HTMLElement>);
+
+  protected readonly context = inject(HOVER_CARD_CONTEXT);
+
   private openTimeout: ReturnType<typeof setTimeout> | null = null;
   private closeTimeout: ReturnType<typeof setTimeout> | null = null;
 
@@ -107,24 +101,23 @@ export class HoverCardTrigger implements OnDestroy {
       this.context.setOpen(true);
     }, this.context.openDelay);
   }
-
   onMouseLeave(): void {
     this.clearTimeouts();
     this.closeTimeout = setTimeout(() => {
       this.context.setOpen(false);
     }, this.context.closeDelay);
   }
-
   onFocus(): void {
     this.clearTimeouts();
     // Open immediately on focus for keyboard users
     this.context.setOpen(true);
   }
-
   onBlur(event: FocusEvent): void {
     // Check if focus moved to the hover card content
     const relatedTarget = event.relatedTarget as HTMLElement | null;
-    const hoverCardContent = this.elementRef.nativeElement.parentElement?.querySelector('[data-slot="hover-card-content"]');
+    const hoverCardContent = this._elementRef.nativeElement.parentElement?.querySelector(
+      '[data-slot="hover-card-content"]',
+    );
 
     if (relatedTarget && hoverCardContent?.contains(relatedTarget)) {
       // Focus moved to content, don't close
@@ -136,15 +129,13 @@ export class HoverCardTrigger implements OnDestroy {
       this.context.setOpen(false);
     }, this.context.closeDelay);
   }
-
   onKeyDown(event: Event): void {
     event.preventDefault();
     this.context.setOpen(!this.context.open());
   }
-
   onEscape(): void {
     this.context.setOpen(false);
-    this.elementRef.nativeElement.focus();
+    this._elementRef.nativeElement.focus();
   }
 
   private clearTimeouts(): void {

package/src/app/lib/components/ui/hover-card/hover-card.component.ts

@@ -1,17 +1,13 @@
 import {
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    input,
-    output,
-    signal,
+  ChangeDetectionStrategy,
+  Component,
+  forwardRef,
+  input,
+  output,
+  signal,
 } from '@angular/core';
 import { HOVER_CARD_CONTEXT, type HoverCardContextValue } from './hover-card-context';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type HoverCardState = 'open' | 'closed';
 
 /**
@@ -33,10 +29,6 @@ export interface HoverCardProps {
   closeDelay?: number;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component HoverCard
  *
@@ -100,6 +92,7 @@ export interface HoverCardProps {
   selector: 'HoverCard',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"hover-card"',
     class: 'relative inline-block',
   },
   providers: [
@@ -111,36 +104,33 @@ export interface HoverCardProps {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HoverCard implements HoverCardContextValue {
+  constructor() {
+    if (this.defaultOpen()) {
+      this.open.set(true);
+    }
+  }
+
+  /** Event handler called when the open state changes */
+  readonly openChange = output<boolean>();
+
   /** The open state of the hover card when initially rendered */
   readonly defaultOpen = input<boolean>(false);
-
   /** The controlled open state of the hover card */
   readonly controlledOpen = input<boolean | undefined>(undefined, { alias: 'open' });
 
+  readonly open = signal(false);
+
   /** The duration from when the pointer enters the trigger until the hover card opens (ms) */
   readonly openDelay = 700;
-
   /** The duration from when the pointer leaves the trigger/content until the hover card closes (ms) */
   readonly closeDelay = 300;
 
-  /** Event handler called when the open state changes */
-  readonly openChange = output<boolean>();
-
-  readonly open = signal(false);
-
-  constructor() {
-    if (this.defaultOpen()) {
-      this.open.set(true);
-    }
-  }
-
   setOpen(open: boolean): void {
     if (this.controlledOpen() === undefined) {
       this.open.set(open);
     }
     this.openChange.emit(open);
   }
-
   isOpen(): boolean {
     return this.controlledOpen() !== undefined ? this.controlledOpen()! : this.open();
   }

package/src/app/lib/components/ui/hover-card/index.ts

@@ -1,13 +1,16 @@
 // Context and types
 export {
-    HOVER_CARD_CONTEXT,
-    type HoverCardAlign,
-    type HoverCardContextValue,
-    type HoverCardSide
+  HOVER_CARD_CONTEXT,
+  type HoverCardAlign,
+  type HoverCardContextValue,
+  type HoverCardSide,
 } from './hover-card-context';
 
 // Components and their types
-export { HoverCardContent, type HoverCardContentProps, type HoverCardContentState } from './hover-card-content.component';
+export {
+  HoverCardContent,
+  type HoverCardContentProps,
+  type HoverCardContentState,
+} from './hover-card-content.component';
 export { HoverCardTrigger, type HoverCardTriggerProps } from './hover-card-trigger.component';
 export { HoverCard, type HoverCardProps, type HoverCardState } from './hover-card.component';
-

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

@@ -1,14 +1,14 @@
 import { cn } from '@/lib/utils';
 import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    ElementRef,
-    forwardRef,
-    input,
-    signal,
-    ViewChild
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  forwardRef,
+  inject,
+  input,
+  signal,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -30,27 +30,23 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
  * <Input type="email" formControlName="email" placeholder="Enter email" />
  */
 @Component({
-  selector: 'Input',
-  template: `
-    <input
-      #inputEl
-      [type]="type()"
-      [placeholder]="placeholder()"
-      [disabled]="isDisabled()"
-      [id]="id()"
-      [name]="name()"
-      [autocomplete]="autocomplete()"
-      [value]="value()"
-      (input)="onInput($event)"
-      (blur)="onTouched()"
-      [class]="inputClass()"
-      [attr.aria-invalid]="ariaInvalid() || null"
-      [attr.aria-describedby]="ariaDescribedBy() || null"
-    />
-  `,
+  selector: 'input[Input]',
+  template: '',
   host: {
-    '[class]': 'computedClass()',
-    'data-slot': 'input',
+    '[type]': 'type()',
+    '[placeholder]': 'placeholder()',
+    '[disabled]': 'isDisabled()',
+    '[id]': 'id()',
+    '[name]': 'name()',
+    '[autocomplete]': 'autocomplete()',
+    '[autofocus]': 'autofocus()',
+    '[value]': 'value()',
+    '(input)': 'onInput($event)',
+    '(blur)': 'onTouched()',
+    '[class]': 'inputClass()',
+    '[attr.aria-invalid]': 'ariaInvalid() || null',
+    '[attr.aria-describedby]': 'ariaDescribedBy() || null',
+    '[attr.data-slot]': '"input"',
   },
   providers: [
     {
@@ -62,43 +58,56 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Input implements ControlValueAccessor, AfterViewInit {
-  @ViewChild('inputEl') inputEl!: ElementRef<HTMLInputElement>;
+  constructor() {
+    // Sync initial value from input
+    const initialValue = this.inputValue();
+    if (initialValue) {
+      this.value.set(initialValue);
+    }
+  }
 
   /** Input type */
   readonly type = input<string>('text');
-
   /** Placeholder text */
   readonly placeholder = input<string>('');
-
   /** Input id attribute */
   readonly id = input<string>('');
-
   /** Input name attribute */
   readonly name = input<string>('');
-
   /** Autocomplete attribute */
   readonly autocomplete = input<string>('');
-
+  /** Autofocus attribute */
+  readonly autofocus = input(false, {
+    transform: (value: boolean | string) => value === '' || value === true || value === 'true',
+  });
   /** Whether the input is disabled - accepts boolean or empty string (for HTML attribute) */
   readonly disabled = input(false, {
     transform: (value: boolean | string) => value === '' || value === true || value === 'true',
   });
-
   /** Initial value for non-form usage */
   readonly inputValue = input<string>('', { alias: 'value' });
-
   /** Aria-invalid state for error display */
   readonly ariaInvalid = input<boolean | undefined>(undefined, { alias: 'aria-invalid' });
-
   /** Aria-describedby for accessibility */
   readonly ariaDescribedBy = input<string | undefined>(undefined, { alias: 'aria-describedby' });
-
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
 
+  private readonly _elementRef = inject(ElementRef<HTMLInputElement>);
+
+  /** Classes applied to the input element */
+  protected readonly inputClass = computed(() =>
+    cn(
+      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input w-full min-w-0 rounded-xl border px-4 py-1 text-base text-left shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+      'bg-zinc-50 dark:bg-zinc-800/50 border-zinc-300 dark:border-zinc-700/50 !text-zinc-900 dark:!text-zinc-50 placeholder:text-zinc-500',
+      'focus-visible:border-primary/30 dark:focus-visible:border-white/30 focus-visible:ring-primary/20 dark:focus-visible:ring-white/20 focus-visible:ring-2',
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+      this.class(),
+    ),
+  );
+
   /** Internal value signal */
   protected readonly value = signal<string>('');
-
   /** Internal disabled state */
   protected readonly isDisabled = signal<boolean>(false);
 
@@ -106,60 +115,33 @@ export class Input implements ControlValueAccessor, AfterViewInit {
   private onChange: (value: string) => void = () => {};
   protected onTouched: () => void = () => {};
 
-  constructor() {
-    // Sync initial value from input
-    const initialValue = this.inputValue();
-    if (initialValue) {
-      this.value.set(initialValue);
-    }
-  }
-
   ngAfterViewInit(): void {
     // View initialization logic after view is ready
     // This ensures the element is available after hydration
   }
 
-  /** Computed class combining base styles and custom classes */
-  protected readonly computedClass = computed(() => cn('relative inline-block w-full'));
-
-  /** Classes applied to the actual input element */
-  protected readonly inputClass = computed(() =>
-    cn(
-      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-      this.class()
-    )
-  );
-
-  /** Handle input events */
-  protected onInput(event: Event): void {
-    const target = event.target as HTMLInputElement;
-    this.value.set(target.value);
-    this.onChange(target.value);
-  }
-
   // ControlValueAccessor implementation
   writeValue(value: string): void {
     this.value.set(value ?? '');
   }
-
   registerOnChange(fn: (value: string) => void): void {
     this.onChange = fn;
   }
-
   registerOnTouched(fn: () => void): void {
     this.onTouched = fn;
   }
-
   setDisabledState(isDisabled: boolean): void {
     this.isDisabled.set(isDisabled);
   }
-
   /** Focus the input element */
   focus(): void {
-    if (this.inputEl?.nativeElement) {
-      this.inputEl.nativeElement.focus();
-    }
+    this._elementRef.nativeElement.focus();
+  }
+
+  /** Handle input events */
+  protected onInput(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.value.set(target.value);
+    this.onChange(target.value);
   }
 }

package/src/app/lib/components/ui/input-group/index.ts

@@ -1,4 +1,3 @@
 export { InputGroupAddon } from './input-group-addon.component';
 export { InputGroupInput } from './input-group-input.component';
 export { InputGroup } from './input-group.component';
-

package/src/app/lib/components/ui/input-group/input-group-addon.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';
 
 /**
  * InputGroupAddon component - prefix or suffix addon for InputGroup.
@@ -34,10 +29,8 @@ export class InputGroupAddon {
   protected readonly computedClass = computed(() =>
     cn(
       'flex h-9 items-center justify-center bg-muted px-3 text-sm text-muted-foreground',
-      this.position() === 'start'
-        ? 'rounded-l-md border-r'
-        : 'rounded-r-md border-l',
-      this.class()
-    )
+      this.position() === 'start' ? 'rounded-l-md border-r' : 'rounded-r-md border-l',
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/input-group/input-group-input.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';
 
 /**
  * InputGroupInput component - styled input for InputGroup without border.
@@ -27,7 +22,7 @@ export class InputGroupInput {
   protected readonly computedClass = computed(() =>
     cn(
       'flex h-9 w-full bg-transparent px-3 py-1 text-base placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/input-group/input-group.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';
 
 /**
  * InputGroup component - wrapper for input with prefix/suffix addons.
@@ -46,8 +41,8 @@ export class InputGroup {
   /** Computed class combining base styles and custom classes */
   protected readonly computedClass = computed(() =>
     cn(
-      'flex items-center rounded-md border border-input bg-background shadow-xs ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 [&>input]:border-0 [&>input]:shadow-none [&>input]:focus-visible:ring-0 [&>input]:focus-visible:ring-offset-0',
-      this.class()
-    )
+      'flex items-center gap-3 rounded-md border border-input bg-background shadow-xs ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 [&>input]:border-0 [&>input]:shadow-none [&>input]:focus-visible:ring-0 [&>input]:focus-visible:ring-offset-0',
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/input-otp/index.ts

@@ -1,9 +1,9 @@
 // Context and types
 export {
-    INPUT_OTP_CONTEXT,
-    type InputOTPContextValue,
-    type InputOTPRenderFn,
-    type InputOTPSlotProps
+  INPUT_OTP_CONTEXT,
+  type InputOTPContextValue,
+  type InputOTPRenderFn,
+  type InputOTPSlotProps,
 } from './input-otp-context';
 
 // Components and their types
@@ -11,4 +11,3 @@ export { InputOTPGroup } from './input-otp-group.component';
 export { InputOTPSeparator } from './input-otp-separator.component';
 export { InputOTPSlot } from './input-otp-slot.component';
 export { InputOTP, type InputOTPProps } from './input-otp.component';
-