@ng-cn/core 1.0.15 → 1.0.17

package/src/app/lib/components/ui/alert-dialog/alert-dialog-cancel.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 { buttonVariants } from '../button/button-variants';
 import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
 
@@ -24,18 +18,18 @@ import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
   host: {
     '[class]': 'computedClass()',
     '(click)': 'onClick($event)',
-    'data-slot': 'alert-dialog-cancel',
+    'attr.data-slot': '"alert-dialog-cancel"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AlertDialogCancel {
-  protected readonly context = inject(ALERT_DIALOG_CONTEXT);
-
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
 
+  protected readonly context = inject(ALERT_DIALOG_CONTEXT);
+
   protected readonly computedClass = computed(() =>
-    cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', this.class())
+    cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', this.class()),
   );
 
   onClick(event: Event): void {

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

@@ -1,17 +1,22 @@
-import { cn, Presence } from '@/lib/utils';
+import { cn } from '@/lib/utils';
 import { FocusTrapDirective } from '@/lib/utils/accessibility';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    HostListener,
-    inject,
-    input,
-    OnDestroy,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  HostListener,
+  inject,
+  input,
+  signal,
 } from '@angular/core';
 import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
 
+/** Animation duration in ms — must match Tailwind's duration-200 */
+const EXIT_ANIMATION_MS = 200;
+
 /**
  * AlertDialogContent component - the modal content of the alert dialog.
  * Matches shadcn/ui React AlertDialogContent exactly.
@@ -21,39 +26,27 @@ import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
  * - Overlay/backdrop click does NOT close the dialog
  * - Focus is trapped within the dialog
  * - User must explicitly click Cancel or Action to close
- *
- * @example
- * <AlertDialogContent>
- *   <AlertDialogHeader>
- *     <AlertDialogTitle>Delete Account</AlertDialogTitle>
- *     <AlertDialogDescription>Are you sure?</AlertDialogDescription>
- *   </AlertDialogHeader>
- *   <AlertDialogFooter>
- *     <AlertDialogCancel>Cancel</AlertDialogCancel>
- *     <AlertDialogAction>Delete</AlertDialogAction>
- *   </AlertDialogFooter>
- * </AlertDialogContent>
  */
 @Component({
   selector: 'AlertDialogContent',
-  imports: [FocusTrapDirective, Presence],
+  imports: [FocusTrapDirective],
   template: `
-    <Presence [present]="context.open()">
+    @if (shouldRender()) {
       <!-- Overlay - does NOT close on click -->
       <div
-        class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-        [attr.data-state]="context.open() ? 'open' : 'closed'"
+        class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-200"
+        [attr.data-state]="context.isOpen() ? 'open' : 'closed'"
         aria-hidden="true"
       ></div>
       <!-- Content Dialog -->
       <div
         hlmFocusTrap
-        [trapFocus]="context.open()"
+        [trapFocus]="context.isOpen()"
         [autoFocus]="true"
         [restoreFocus]="false"
         [initialFocus]="'[data-slot=alert-dialog-cancel]'"
         [class]="computedClass()"
-        [attr.data-state]="context.open() ? 'open' : 'closed'"
+        [attr.data-state]="context.isOpen() ? 'open' : 'closed'"
         [attr.id]="context.contentId"
         [attr.aria-labelledby]="context.titleId"
         [attr.aria-describedby]="context.descriptionId"
@@ -62,21 +55,47 @@ import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
       >
         <ng-content />
       </div>
-    </Presence>
+    }
   `,
   host: {
+    'attr.data-slot': '"alert-dialog-content"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AlertDialogContent implements OnDestroy {
-  protected readonly context = inject(ALERT_DIALOG_CONTEXT);
+export class AlertDialogContent {
+  constructor() {
+    effect(() => {
+      const isOpen = this.context.isOpen();
+      this._cdr.markForCheck();
+
+      if (isOpen) {
+        this.shouldRender.set(true);
+        this.lockBodyScroll();
+      } else {
+        this.unlockBodyScroll();
+        if (this.shouldRender()) {
+          setTimeout(() => {
+            this.shouldRender.set(false);
+            this._cdr.markForCheck();
+          }, EXIT_ANIMATION_MS);
+        }
+      }
+    });
+
+    this._destroyRef.onDestroy(() => {
+      this.unlockBodyScroll();
+      this.restoreFocus();
+    });
+  }
 
-  /** Additional CSS classes */
   readonly class = input<string>('');
 
-  /** Previous body overflow for restoration */
-  private previousBodyOverflow = '';
+  private readonly _destroyRef = inject(DestroyRef);
+  private readonly _cdr = inject(ChangeDetectorRef);
+
+  protected readonly context = inject(ALERT_DIALOG_CONTEXT);
+  protected readonly shouldRender = signal(false);
 
   protected readonly computedClass = computed(() =>
     cn(
@@ -87,20 +106,17 @@ export class AlertDialogContent implements OnDestroy {
       'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
       'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
       'sm:rounded-lg',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
-  constructor() {
-    // Handle body scroll lock based on open state
-    effect(() => {
-      const isOpen = this.context.open();
-      if (isOpen) {
-        this.lockBodyScroll();
-      } else {
-        this.unlockBodyScroll();
-      }
-    });
+  private previousBodyOverflow = '';
+
+  @HostListener('document:keydown.escape')
+  onEscapeKey(): void {
+    if (this.context.isOpen()) {
+      this.close();
+    }
   }
 
   private lockBodyScroll(): void {
@@ -109,38 +125,19 @@ export class AlertDialogContent implements OnDestroy {
       document.body.style.overflow = 'hidden';
     }
   }
-
   private unlockBodyScroll(): void {
     if (typeof document !== 'undefined') {
       document.body.style.overflow = this.previousBodyOverflow;
     }
   }
-
-  ngOnDestroy(): void {
-    // Restore body scroll
-    this.unlockBodyScroll();
-    // Restore focus to trigger element
-    this.restoreFocus();
-  }
-
-  @HostListener('document:keydown.escape')
-  onEscapeKey(): void {
-    if (this.context.open()) {
-      this.close();
-    }
-  }
-
   private close(): void {
     this.restoreFocus();
     this.context.setOpen(false);
   }
-
   private restoreFocus(): void {
-    const triggerEl = this.context.triggerElement();
+    const triggerEl = this.context.getTriggerElement();
     if (triggerEl) {
-      setTimeout(() => {
-        triggerEl.focus();
-      }, 0);
+      setTimeout(() => triggerEl.focus(), 0);
     }
   }
 }

package/src/app/lib/components/ui/alert-dialog/alert-dialog-context.ts

@@ -1,14 +1,19 @@
-import { InjectionToken, WritableSignal } from '@angular/core';
+import { InjectionToken } from '@angular/core';
 
 export interface AlertDialogContextValue {
-  open: WritableSignal<boolean>;
-  setOpen: (open: boolean) => void;
+  /** Get the current open state */
+  isOpen(): boolean;
+  /** Set the open state */
+  setOpen(open: boolean): void;
   /** Unique IDs for ARIA relationships */
   titleId: string;
   descriptionId: string;
   contentId: string;
   /** Trigger element reference for focus restoration */
-  triggerElement: WritableSignal<HTMLElement | null>;
+  setTriggerElement(element: HTMLElement | null): void;
+  getTriggerElement(): HTMLElement | null;
 }
 
-export const ALERT_DIALOG_CONTEXT = new InjectionToken<AlertDialogContextValue>('ALERT_DIALOG_CONTEXT');
+export const ALERT_DIALOG_CONTEXT = new InjectionToken<AlertDialogContextValue>(
+  'ALERT_DIALOG_CONTEXT',
+);

package/src/app/lib/components/ui/alert-dialog/alert-dialog-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 { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
 
 /**
@@ -20,18 +14,19 @@ import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
   selector: 'AlertDialogDescription',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"alert-dialog-description"',
     '[class]': 'computedClass()',
     '[attr.id]': 'context.descriptionId',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AlertDialogDescription {
-  protected readonly context = inject(ALERT_DIALOG_CONTEXT);
-
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
 
+  protected readonly context = inject(ALERT_DIALOG_CONTEXT);
+
   protected readonly computedClass = computed(() =>
-    cn('text-sm text-muted-foreground', this.class())
+    cn('text-sm text-muted-foreground', this.class()),
   );
 }

package/src/app/lib/components/ui/alert-dialog/alert-dialog-footer.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';
 
 /**
  * AlertDialogFooter component - footer area of the alert dialog.
@@ -21,6 +16,7 @@ import {
   selector: 'AlertDialogFooter',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"alert-dialog-footer"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -30,6 +26,6 @@ export class AlertDialogFooter {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this.class())
+    cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this.class()),
   );
 }

package/src/app/lib/components/ui/alert-dialog/alert-dialog-header.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';
 
 /**
  * AlertDialogHeader component - header area of the alert dialog.
@@ -21,6 +16,7 @@ import {
   selector: 'AlertDialogHeader',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"alert-dialog-header"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -30,6 +26,6 @@ export class AlertDialogHeader {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('flex flex-col space-y-2 text-center sm:text-left', this.class())
+    cn('flex flex-col space-y-2 text-center sm:text-left', this.class()),
   );
 }

package/src/app/lib/components/ui/alert-dialog/alert-dialog-title.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 { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
 
 /**
@@ -20,18 +14,17 @@ import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
   selector: 'AlertDialogTitle',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"alert-dialog-title"',
     '[class]': 'computedClass()',
     '[attr.id]': 'context.titleId',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AlertDialogTitle {
-  protected readonly context = inject(ALERT_DIALOG_CONTEXT);
-
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn('text-lg font-semibold', this.class())
-  );
+  protected readonly context = inject(ALERT_DIALOG_CONTEXT);
+
+  protected readonly computedClass = computed(() => cn('text-lg font-semibold', this.class()));
 }

package/src/app/lib/components/ui/alert-dialog/alert-dialog-trigger.component.ts

@@ -1,10 +1,4 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    ElementRef,
-    inject,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, inject, input } from '@angular/core';
 import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
 
 /**
@@ -21,24 +15,26 @@ import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
   selector: 'AlertDialogTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"alert-dialog-trigger"',
     '(click)': 'onClick($event)',
     '[attr.aria-haspopup]': '"dialog"',
-    '[attr.aria-expanded]': 'context.open()',
+    '[attr.aria-expanded]': 'context.isOpen()',
     '[attr.aria-controls]': 'context.contentId',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AlertDialogTrigger {
-  protected readonly context = inject(ALERT_DIALOG_CONTEXT);
-  private readonly elementRef = inject(ElementRef<HTMLElement>);
-
   /** Render as child (for custom trigger elements) */
   readonly asChild = input<boolean>(false);
 
+  private readonly _elementRef = inject(ElementRef<HTMLElement>);
+
+  protected readonly context = inject(ALERT_DIALOG_CONTEXT);
+
   onClick(event: Event): void {
     event.stopPropagation();
     // Save trigger element for focus restoration when dialog closes
-    this.context.triggerElement.set(this.elementRef.nativeElement);
+    this.context.setTriggerElement(this._elementRef.nativeElement);
     this.context.setOpen(true);
   }
 }

package/src/app/lib/components/ui/alert-dialog/alert-dialog.component.ts

@@ -1,12 +1,11 @@
 import { AriaIdService } from '@/lib/utils/accessibility';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    inject,
-    input,
-    output,
-    signal,
+  ChangeDetectionStrategy,
+  Component,
+  forwardRef,
+  inject,
+  input,
+  model,
 } from '@angular/core';
 import { ALERT_DIALOG_CONTEXT, type AlertDialogContextValue } from './alert-dialog-context';
 
@@ -19,7 +18,7 @@ import { ALERT_DIALOG_CONTEXT, type AlertDialogContextValue } from './alert-dial
  * - User can explicitly click Cancel or Action to close
  *
  * @example
- * <AlertDialog>
+ * <AlertDialog [(open)]="isOpen">
  *   <AlertDialogTrigger>
  *     <Button variant="destructive">Delete Account</Button>
  *   </AlertDialogTrigger>
@@ -44,48 +43,43 @@ import { ALERT_DIALOG_CONTEXT, type AlertDialogContextValue } from './alert-dial
       useExisting: forwardRef(() => AlertDialog),
     },
   ],
+  host: {
+    'attr.data-slot': '"alert-dialog"',
+    style: 'display: contents',
+  },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AlertDialog implements AlertDialogContextValue {
-  private readonly ariaIdService = inject(AriaIdService);
+  /** Controlled open state - uses model for proper two-way binding */
+  readonly open = model<boolean>(false);
 
   /** Default open state */
   readonly defaultOpen = input<boolean>(false);
 
-  /** Controlled open state */
-  readonly controlledOpen = input<boolean | undefined>(undefined, { alias: 'open' });
-
-  /** Open change event emitted when dialog state changes */
-  readonly openChange = output<boolean>();
-
-  /** Internal open state signal */
-  readonly open = signal(false);
+  private readonly _ariaIdService = inject(AriaIdService);
 
   /** ARIA IDs for accessibility relationships */
-  private readonly ariaIds = this.ariaIdService.generateDialogIds('alertdialog');
+  private readonly ariaIds = this._ariaIdService.generateDialogIds('alertdialog');
   readonly titleId = this.ariaIds.titleId;
   readonly descriptionId = this.ariaIds.descriptionId;
   readonly contentId = this.ariaIds.contentId;
-
   /** Reference to trigger element for focus restoration */
-  readonly triggerElement = signal<HTMLElement | null>(null);
+  private triggerEl: HTMLElement | null = null;
 
-  constructor() {
-    if (this.defaultOpen()) {
-      this.open.set(true);
-    }
+  /** Check if dialog is open - directly reads from model */
+  isOpen(): boolean {
+    return this.open();
   }
-
-  /** Set the open state and emit change event */
+  /** Set the open state */
   setOpen(open: boolean): void {
-    if (this.controlledOpen() === undefined) {
-      this.open.set(open);
-    }
-    this.openChange.emit(open);
+    this.open.set(open);
   }
-
-  /** Get current open state */
-  isOpen(): boolean {
-    return this.controlledOpen() !== undefined ? this.controlledOpen()! : this.open();
+  /** Set trigger element for focus restoration */
+  setTriggerElement(element: HTMLElement | null): void {
+    this.triggerEl = element;
+  }
+  /** Get trigger element for focus restoration */
+  getTriggerElement(): HTMLElement | null {
+    return this.triggerEl;
   }
 }

package/src/app/lib/components/ui/alert-dialog/index.ts

@@ -8,4 +8,3 @@ export { AlertDialogHeader } from './alert-dialog-header.component';
 export { AlertDialogTitle } from './alert-dialog-title.component';
 export { AlertDialogTrigger } from './alert-dialog-trigger.component';
 export { AlertDialog } from './alert-dialog.component';
-

package/src/app/lib/components/ui/aspect-ratio/aspect-ratio.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';
 
 /**
  * AspectRatio component that maintains a fixed aspect ratio for its content.
@@ -35,6 +30,7 @@ import {
     </div>
   `,
   host: {
+    'attr.data-slot': '"aspect-ratio"',
     '[class]': 'computedClass()',
     '[style.padding-bottom]': 'paddingBottom()',
     '[style.position]': '"relative"',
@@ -57,7 +53,5 @@ export class AspectRatio {
   });
 
   /** Computed class combining base styles and custom classes */
-  protected readonly computedClass = computed(() =>
-    cn('relative block w-full', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('relative block w-full', this.class()));
 }

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

@@ -0,0 +1,9 @@
+import { InjectionToken, WritableSignal } from '@angular/core';
+
+export type AvatarImageStatus = 'idle' | 'loaded' | 'error';
+
+export interface AvatarContext {
+  imageStatus: WritableSignal<AvatarImageStatus>;
+}
+
+export const AVATAR_CONTEXT = new InjectionToken<AvatarContext>('AvatarContext');

package/src/app/lib/components/ui/avatar/avatar-fallback.component.ts

@@ -1,34 +1,23 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { AVATAR_CONTEXT } from './avatar-context';
 
-/**
- * Avatar fallback component.
- * Shown when the image fails to load or is not provided.
- *
- * @example
- * <AvatarFallback>JD</AvatarFallback>
- */
 @Component({
   selector: 'AvatarFallback',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"avatar-fallback"',
     '[class]': 'computedClass()',
-    'data-slot': 'avatar-fallback',
+    // Hidden via display:none when image has loaded; always in DOM for layout stability
+    '[style.display]': 'context.imageStatus() === "loaded" ? "none" : null',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AvatarFallback {
   readonly class = input<string>('');
+  protected readonly context = inject(AVATAR_CONTEXT);
 
   protected readonly computedClass = computed(() =>
-    cn(
-      'bg-muted flex size-full items-center justify-center rounded-full text-xs',
-      this.class()
-    )
+    cn('bg-muted flex size-full items-center justify-center rounded-full text-xs', this.class()),
   );
 }