@ng-cn/core 1.0.11 → 1.0.12

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

@@ -0,0 +1,44 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+} from '@angular/core';
+import { buttonVariants } from '../button/button-variants';
+import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
+
+/**
+ * AlertDialogAction component - action button that confirms and closes the dialog.
+ * Matches shadcn/ui React AlertDialogAction exactly.
+ * Styled as the primary action button.
+ *
+ * @example
+ * <AlertDialogAction>Delete Account</AlertDialogAction>
+ */
+@Component({
+  selector: 'AlertDialogAction',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    '(click)': 'onClick($event)',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AlertDialogAction {
+  protected readonly context = inject(ALERT_DIALOG_CONTEXT);
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(buttonVariants(), this.class())
+  );
+
+  onClick(event: Event): void {
+    // Allow the click to propagate for custom handlers
+    event.stopPropagation();
+    this.context.setOpen(false);
+  }
+}

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

@@ -0,0 +1,45 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+} from '@angular/core';
+import { buttonVariants } from '../button/button-variants';
+import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
+
+/**
+ * AlertDialogCancel component - cancel button that closes the dialog.
+ * Matches shadcn/ui React AlertDialogCancel exactly.
+ * Styled as a secondary/outline button.
+ * This is the default focus target when AlertDialog opens.
+ *
+ * @example
+ * <AlertDialogCancel>Cancel</AlertDialogCancel>
+ */
+@Component({
+  selector: 'AlertDialogCancel',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    '(click)': 'onClick($event)',
+    '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 computedClass = computed(() =>
+    cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', this.class())
+  );
+
+  onClick(event: Event): void {
+    event.stopPropagation();
+    this.context.setOpen(false);
+  }
+}

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

@@ -0,0 +1,146 @@
+import { cn, Presence } from '@/lib/utils';
+import { FocusTrapDirective } from '@/lib/utils/accessibility';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    effect,
+    HostListener,
+    inject,
+    input,
+    OnDestroy,
+} from '@angular/core';
+import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
+
+/**
+ * AlertDialogContent component - the modal content of the alert dialog.
+ * Matches shadcn/ui React AlertDialogContent exactly.
+ *
+ * Features:
+ * - Escape key closes the dialog
+ * - 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],
+  template: `
+    <Presence [present]="context.open()">
+      <!-- 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'"
+        aria-hidden="true"
+      ></div>
+      <!-- Content Dialog -->
+      <div
+        hlmFocusTrap
+        [trapFocus]="context.open()"
+        [autoFocus]="true"
+        [restoreFocus]="false"
+        [initialFocus]="'[data-slot=alert-dialog-cancel]'"
+        [class]="computedClass()"
+        [attr.data-state]="context.open() ? 'open' : 'closed'"
+        [attr.id]="context.contentId"
+        [attr.aria-labelledby]="context.titleId"
+        [attr.aria-describedby]="context.descriptionId"
+        role="alertdialog"
+        aria-modal="true"
+      >
+        <ng-content />
+      </div>
+    </Presence>
+  `,
+  host: {
+    class: 'contents',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AlertDialogContent implements OnDestroy {
+  protected readonly context = inject(ALERT_DIALOG_CONTEXT);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  /** Previous body overflow for restoration */
+  private previousBodyOverflow = '';
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200',
+      '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',
+      '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()
+    )
+  );
+
+  constructor() {
+    // Handle body scroll lock based on open state
+    effect(() => {
+      const isOpen = this.context.open();
+      if (isOpen) {
+        this.lockBodyScroll();
+      } else {
+        this.unlockBodyScroll();
+      }
+    });
+  }
+
+  private lockBodyScroll(): void {
+    if (typeof document !== 'undefined') {
+      this.previousBodyOverflow = document.body.style.overflow;
+      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();
+    if (triggerEl) {
+      setTimeout(() => {
+        triggerEl.focus();
+      }, 0);
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+import { InjectionToken, WritableSignal } from '@angular/core';
+
+export interface AlertDialogContextValue {
+  open: WritableSignal<boolean>;
+  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>;
+}
+
+export const ALERT_DIALOG_CONTEXT = new InjectionToken<AlertDialogContextValue>('ALERT_DIALOG_CONTEXT');

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

@@ -0,0 +1,37 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+} from '@angular/core';
+import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
+
+/**
+ * AlertDialogDescription component - description text of the alert dialog.
+ * Matches shadcn/ui React AlertDialogDescription exactly.
+ * Automatically links to dialog via aria-describedby.
+ *
+ * @example
+ * <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+ */
+@Component({
+  selector: 'AlertDialogDescription',
+  template: `<ng-content />`,
+  host: {
+    '[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 computedClass = computed(() =>
+    cn('text-sm text-muted-foreground', this.class())
+  );
+}

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

@@ -0,0 +1,35 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * AlertDialogFooter component - footer area of the alert dialog.
+ * Matches shadcn/ui React AlertDialogFooter exactly.
+ * Contains action and cancel buttons.
+ *
+ * @example
+ * <AlertDialogFooter>
+ *   <AlertDialogCancel>Cancel</AlertDialogCancel>
+ *   <AlertDialogAction>Delete</AlertDialogAction>
+ * </AlertDialogFooter>
+ */
+@Component({
+  selector: 'AlertDialogFooter',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AlertDialogFooter {
+  /** Additional CSS classes to apply */
+  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())
+  );
+}

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

@@ -0,0 +1,35 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * AlertDialogHeader component - header area of the alert dialog.
+ * Matches shadcn/ui React AlertDialogHeader exactly.
+ * Contains title and description elements.
+ *
+ * @example
+ * <AlertDialogHeader>
+ *   <AlertDialogTitle>Delete Account</AlertDialogTitle>
+ *   <AlertDialogDescription>Are you absolutely sure?</AlertDialogDescription>
+ * </AlertDialogHeader>
+ */
+@Component({
+  selector: 'AlertDialogHeader',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AlertDialogHeader {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    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

@@ -0,0 +1,37 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+} from '@angular/core';
+import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
+
+/**
+ * AlertDialogTitle component - title text of the alert dialog.
+ * Matches shadcn/ui React AlertDialogTitle exactly.
+ * Automatically links to dialog via aria-labelledby.
+ *
+ * @example
+ * <AlertDialogTitle>Delete Account?</AlertDialogTitle>
+ */
+@Component({
+  selector: 'AlertDialogTitle',
+  template: `<ng-content />`,
+  host: {
+    '[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())
+  );
+}

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

@@ -0,0 +1,44 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    inject,
+    input,
+} from '@angular/core';
+import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
+
+/**
+ * AlertDialogTrigger component - element that opens the alert dialog.
+ * Matches shadcn/ui React AlertDialogTrigger exactly.
+ * Saves the trigger element for focus restoration when dialog closes.
+ *
+ * @example
+ * <AlertDialogTrigger>
+ *   <Button variant="destructive">Delete</Button>
+ * </AlertDialogTrigger>
+ */
+@Component({
+  selector: 'AlertDialogTrigger',
+  template: `<ng-content />`,
+  host: {
+    '(click)': 'onClick($event)',
+    '[attr.aria-haspopup]': '"dialog"',
+    '[attr.aria-expanded]': 'context.open()',
+    '[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);
+
+  onClick(event: Event): void {
+    event.stopPropagation();
+    // Save trigger element for focus restoration when dialog closes
+    this.context.triggerElement.set(this.elementRef.nativeElement);
+    this.context.setOpen(true);
+  }
+}

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

@@ -0,0 +1,91 @@
+import { AriaIdService } from '@/lib/utils/accessibility';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    forwardRef,
+    inject,
+    input,
+    output,
+    signal,
+} from '@angular/core';
+import { ALERT_DIALOG_CONTEXT, type AlertDialogContextValue } from './alert-dialog-context';
+
+/**
+ * AlertDialog component - a modal dialog for important actions.
+ * Matches shadcn/ui React AlertDialog exactly.
+ * Follows Radix UI AlertDialog behavior:
+ * - Escape key closes the dialog
+ * - Overlay/backdrop click does NOT close the dialog
+ * - User can explicitly click Cancel or Action to close
+ *
+ * @example
+ * <AlertDialog>
+ *   <AlertDialogTrigger>
+ *     <Button variant="destructive">Delete Account</Button>
+ *   </AlertDialogTrigger>
+ *   <AlertDialogContent>
+ *     <AlertDialogHeader>
+ *       <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+ *       <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+ *     </AlertDialogHeader>
+ *     <AlertDialogFooter>
+ *       <AlertDialogCancel>Cancel</AlertDialogCancel>
+ *       <AlertDialogAction>Continue</AlertDialogAction>
+ *     </AlertDialogFooter>
+ *   </AlertDialogContent>
+ * </AlertDialog>
+ */
+@Component({
+  selector: 'AlertDialog',
+  template: `<ng-content />`,
+  providers: [
+    {
+      provide: ALERT_DIALOG_CONTEXT,
+      useExisting: forwardRef(() => AlertDialog),
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AlertDialog implements AlertDialogContextValue {
+  private readonly ariaIdService = inject(AriaIdService);
+
+  /** 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);
+
+  /** ARIA IDs for accessibility relationships */
+  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);
+
+  constructor() {
+    if (this.defaultOpen()) {
+      this.open.set(true);
+    }
+  }
+
+  /** Set the open state and emit change event */
+  setOpen(open: boolean): void {
+    if (this.controlledOpen() === undefined) {
+      this.open.set(open);
+    }
+    this.openChange.emit(open);
+  }
+
+  /** Get current open state */
+  isOpen(): boolean {
+    return this.controlledOpen() !== undefined ? this.controlledOpen()! : this.open();
+  }
+}

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

@@ -0,0 +1,11 @@
+export { AlertDialogAction } from './alert-dialog-action.component';
+export { AlertDialogCancel } from './alert-dialog-cancel.component';
+export { AlertDialogContent } from './alert-dialog-content.component';
+export { ALERT_DIALOG_CONTEXT, type AlertDialogContextValue } from './alert-dialog-context';
+export { AlertDialogDescription } from './alert-dialog-description.component';
+export { AlertDialogFooter } from './alert-dialog-footer.component';
+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

@@ -0,0 +1,63 @@
+import { cn } from '@/lib/utils';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+
+/**
+ * AspectRatio component that maintains a fixed aspect ratio for its content.
+ * Matches shadcn/ui React AspectRatio exactly.
+ * Follows Radix UI AspectRatio specification.
+ *
+ * @example
+ * <!-- 16:9 aspect ratio (default) -->
+ * <AspectRatio [ratio]="16/9">
+ *   <img src="image.jpg" alt="Image" class="object-cover w-full h-full" />
+ * </AspectRatio>
+ *
+ * <!-- Square aspect ratio -->
+ * <AspectRatio [ratio]="1">
+ *   <div class="bg-muted flex items-center justify-center">Square</div>
+ * </AspectRatio>
+ *
+ * <!-- 4:3 aspect ratio -->
+ * <AspectRatio [ratio]="4/3">
+ *   <video src="video.mp4"></video>
+ * </AspectRatio>
+ */
+@Component({
+  selector: 'AspectRatio',
+  template: `
+    <div class="absolute inset-0 h-full w-full">
+      <ng-content />
+    </div>
+  `,
+  host: {
+    '[class]': 'computedClass()',
+    '[style.padding-bottom]': 'paddingBottom()',
+    '[style.position]': '"relative"',
+    '[style.display]': '"block"',
+    '[style.width]': '"100%"',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AspectRatio {
+  /** The desired aspect ratio (width / height). Defaults to 16/9 */
+  readonly ratio = input<number>(16 / 9);
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Calculate padding-bottom for aspect ratio */
+  protected readonly paddingBottom = computed(() => {
+    const r = this.ratio();
+    return r > 0 ? `${(1 / r) * 100}%` : '56.25%';
+  });
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('relative block w-full', this.class())
+  );
+}

package/src/app/lib/components/ui/aspect-ratio/index.ts

@@ -0,0 +1 @@
+export { AspectRatio } from './aspect-ratio.component';

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

@@ -0,0 +1,34 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * 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: {
+    '[class]': 'computedClass()',
+    'data-slot': 'avatar-fallback',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AvatarFallback {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'bg-muted flex size-full items-center justify-center rounded-full text-xs',
+      this.class()
+    )
+  );
+}

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

@@ -0,0 +1,31 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * Avatar image component.
+ * The image to display for the avatar.
+ *
+ * @example
+ * <AvatarImage src="/avatar.png" alt="User avatar" />
+ */
+@Component({
+  selector: 'AvatarImage',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    'data-slot': 'avatar-image',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AvatarImage {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('aspect-square size-full', this.class())
+  );
+}