@ng-cn/core 1.0.10 → 1.0.12

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

@@ -0,0 +1,87 @@
+import { AriaIdService } from '@/lib/utils/accessibility';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    forwardRef,
+    inject,
+    input,
+    output,
+    signal,
+} from '@angular/core';
+import { DIALOG_CONTEXT, type DialogContextValue } from './dialog-context';
+
+/**
+ * Dialog component - root container for modal dialogs.
+ * Matches shadcn/ui React Dialog exactly.
+ *
+ * @example
+ * <Dialog>
+ *   <DialogTrigger>
+ *     <Button variant="outline">Open Dialog</Button>
+ *   </DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Dialog Title</DialogTitle>
+ *       <DialogDescription>Dialog description here.</DialogDescription>
+ *     </DialogHeader>
+ *     <DialogFooter>
+ *       <Button>Save changes</Button>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ */
+@Component({
+  selector: 'Dialog',
+  template: `<ng-content />`,
+  providers: [
+    {
+      provide: DIALOG_CONTEXT,
+      useExisting: forwardRef(() => Dialog),
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Dialog implements DialogContextValue {
+  private readonly ariaIdService = inject(AriaIdService);
+
+  /** Default open state */
+  readonly defaultOpen = input<boolean>(false);
+
+  /** Controlled open state */
+  readonly controlledOpen = input<boolean | undefined>(undefined, { alias: 'open' });
+
+  /** Modal mode - prevents interaction with outside elements */
+  readonly modal = input<boolean>(true);
+
+  /** Open change event */
+  readonly openChange = output<boolean>();
+
+  readonly open = signal(false);
+
+  /** ARIA IDs for accessibility relationships */
+  private readonly ariaIds = this.ariaIdService.generateDialogIds('dialog');
+  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);
+    }
+  }
+
+  setOpen(open: boolean): void {
+    if (this.controlledOpen() === undefined) {
+      this.open.set(open);
+    }
+    this.openChange.emit(open);
+  }
+
+  readonly isOpen = computed(() =>
+    this.controlledOpen() !== undefined ? this.controlledOpen()! : this.open()
+  );
+}

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

@@ -0,0 +1,10 @@
+export { DialogClose } from './dialog-close.component';
+export { DialogContent } from './dialog-content.component';
+export { DIALOG_CONTEXT, type DialogContextValue } from './dialog-context';
+export { DialogDescription } from './dialog-description.component';
+export { DialogFooter } from './dialog-footer.component';
+export { DialogHeader } from './dialog-header.component';
+export { DialogTitle } from './dialog-title.component';
+export { DialogTrigger } from './dialog-trigger.component';
+export { Dialog } from './dialog.component';
+

package/src/app/lib/components/ui/drawer/drawer-close.component.ts

@@ -0,0 +1,31 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    inject,
+    input,
+} from '@angular/core';
+import { DRAWER_CONTEXT } from './drawer-context';
+
+/**
+ * DrawerClose component - button that closes the drawer.
+ * Matches shadcn/ui React DrawerClose exactly.
+ */
+@Component({
+  selector: 'DrawerClose',
+  template: `<ng-content />`,
+  host: {
+    '(click)': 'onClick($event)',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DrawerClose {
+  protected readonly context = inject(DRAWER_CONTEXT);
+
+  /** Render as child */
+  readonly asChild = input<boolean>(false);
+
+  onClick(event: Event): void {
+    event.stopPropagation();
+    this.context.setOpen(false);
+  }
+}

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

@@ -0,0 +1,143 @@
+import { cn, Presence } from '@/lib/utils';
+import { FocusTrapDirective } from '@/lib/utils/accessibility';
+import {
+    afterNextRender,
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    effect,
+    ElementRef,
+    inject,
+    Injector,
+    input,
+    OnDestroy,
+    viewChild,
+} from '@angular/core';
+import { DRAWER_CONTEXT } from './drawer-context';
+
+/**
+ * DrawerContent component - the content of the drawer.
+ * Matches shadcn/ui React DrawerContent exactly with enhanced accessibility.
+ * Includes focus trap, ARIA relationships, and focus restoration.
+ */
+@Component({
+  selector: 'DrawerContent',
+  imports: [FocusTrapDirective, Presence],
+  template: `
+    <Presence [present]="context.open()">
+      <!-- Overlay -->
+      <div
+        class="fixed inset-0 z-50 bg-black/50 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'"
+        (click)="onOverlayClick($event)"
+      ></div>
+      <!-- Content -->
+      <div
+        #contentEl
+        [class]="computedClass()"
+        [attr.data-state]="context.open() ? 'open' : 'closed'"
+        role="dialog"
+        aria-modal="true"
+        [attr.id]="context.contentId"
+        [attr.aria-labelledby]="context.titleId"
+        [attr.aria-describedby]="context.descriptionId"
+        hlmFocusTrap
+        [trapFocus]="context.open()"
+        (keydown.escape)="onEscapeKey()"
+      >
+        <!-- Handle -->
+        <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted"></div>
+        <ng-content />
+      </div>
+    </Presence>
+  `,
+  host: {
+    class: 'contents',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DrawerContent implements OnDestroy {
+  protected readonly context = inject(DRAWER_CONTEXT);
+  private readonly contentEl = viewChild<ElementRef<HTMLElement>>('contentEl');
+  private readonly injector = inject(Injector);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  /** Previous body overflow style for restoration */
+  private previousBodyOverflow = '';
+
+  constructor() {
+    // Handle body scroll lock and focus restoration
+    effect(() => {
+      if (this.context.open()) {
+        this.lockBodyScroll();
+        // Focus first element when opened (browser-only, deferred)
+        afterNextRender(() => {
+          this.focusFirstElement();
+        }, { injector: this.injector });
+      } else {
+        this.unlockBodyScroll();
+        this.restoreFocus();
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.unlockBodyScroll();
+  }
+
+  protected readonly computedClass = computed(() => {
+    const directionClasses = {
+      top: 'inset-x-0 top-0 mb-24 rounded-b-[10px] border-b data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top',
+      bottom: 'inset-x-0 bottom-0 mt-24 rounded-t-[10px] border-t data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom',
+      left: 'inset-y-0 left-0 mr-24 w-auto rounded-r-[10px] border-r data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left',
+      right: 'inset-y-0 right-0 ml-24 w-auto rounded-l-[10px] border-l data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right',
+    };
+
+    return cn(
+      'fixed z-50 flex flex-col bg-background text-foreground',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out',
+      'data-[state=open]:duration-500 data-[state=closed]:duration-300',
+      directionClasses[this.context.direction],
+      this.class()
+    );
+  });
+
+  onOverlayClick(event: Event): void {
+    event.stopPropagation();
+    this.context.setOpen(false);
+  }
+
+  onEscapeKey(): void {
+    this.context.setOpen(false);
+  }
+
+  private focusFirstElement(): void {
+    setTimeout(() => {
+      const content = this.contentEl()?.nativeElement;
+      if (content) {
+        const focusable = content.querySelector(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        ) as HTMLElement;
+        focusable?.focus();
+      }
+    });
+  }
+
+  private restoreFocus(): void {
+    const trigger = this.context.triggerElement();
+    if (trigger) {
+      setTimeout(() => trigger.focus());
+    }
+  }
+
+  private lockBodyScroll(): void {
+    this.previousBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+  }
+
+  private unlockBodyScroll(): void {
+    document.body.style.overflow = this.previousBodyOverflow;
+  }
+}

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

@@ -0,0 +1,17 @@
+import { InjectionToken, WritableSignal } from '@angular/core';
+
+export interface DrawerContextValue {
+  open: WritableSignal<boolean>;
+  setOpen: (open: boolean) => void;
+  direction: 'top' | 'right' | 'bottom' | 'left';
+  /** ARIA ID for the title element */
+  titleId: string;
+  /** ARIA ID for the description element */
+  descriptionId: string;
+  /** ARIA ID for the content element */
+  contentId: string;
+  /** Reference to the trigger element for focus restoration */
+  triggerElement: WritableSignal<HTMLElement | null>;
+}
+
+export const DRAWER_CONTEXT = new InjectionToken<DrawerContextValue>('DRAWER_CONTEXT');

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

@@ -0,0 +1,33 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+} from '@angular/core';
+import { DRAWER_CONTEXT } from './drawer-context';
+
+/**
+ * DrawerDescription component - description text of the drawer.
+ * Matches shadcn/ui React DrawerDescription exactly with ARIA support.
+ */
+@Component({
+  selector: 'DrawerDescription',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.id]': 'context.descriptionId',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DrawerDescription {
+  protected readonly context = inject(DRAWER_CONTEXT);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('text-sm text-muted-foreground', this.class())
+  );
+}

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

@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * DrawerFooter component - footer area of the drawer.
+ * Matches shadcn/ui React DrawerFooter exactly.
+ */
+@Component({
+  selector: 'DrawerFooter',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DrawerFooter {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('mt-auto flex flex-col gap-2 p-4', this.class())
+  );
+}

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

@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * DrawerHeader component - header area of the drawer.
+ * Matches shadcn/ui React DrawerHeader exactly.
+ */
+@Component({
+  selector: 'DrawerHeader',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DrawerHeader {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('grid gap-1.5 p-4 text-center sm:text-left', this.class())
+  );
+}

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

@@ -0,0 +1,33 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+} from '@angular/core';
+import { DRAWER_CONTEXT } from './drawer-context';
+
+/**
+ * DrawerTitle component - title text of the drawer.
+ * Matches shadcn/ui React DrawerTitle exactly with ARIA support.
+ */
+@Component({
+  selector: 'DrawerTitle',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.id]': 'context.titleId',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DrawerTitle {
+  protected readonly context = inject(DRAWER_CONTEXT);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('text-lg font-semibold leading-none tracking-tight', this.class())
+  );
+}

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

@@ -0,0 +1,38 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    inject,
+    input,
+} from '@angular/core';
+import { DRAWER_CONTEXT } from './drawer-context';
+
+/**
+ * DrawerTrigger component - element that opens the drawer.
+ * Matches shadcn/ui React DrawerTrigger exactly with enhanced accessibility.
+ */
+@Component({
+  selector: 'DrawerTrigger',
+  template: `<ng-content />`,
+  host: {
+    '(click)': 'onClick($event)',
+    '[attr.aria-controls]': 'context.contentId',
+    '[attr.aria-expanded]': 'context.open()',
+    '[attr.aria-haspopup]': '"dialog"',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DrawerTrigger {
+  protected readonly context = inject(DRAWER_CONTEXT);
+  private readonly elementRef = inject(ElementRef<HTMLElement>);
+
+  /** Render as child */
+  readonly asChild = input<boolean>(false);
+
+  onClick(event: Event): void {
+    event.stopPropagation();
+    // Save trigger element for focus restoration
+    this.context.triggerElement.set(this.elementRef.nativeElement);
+    this.context.setOpen(true);
+  }
+}

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

@@ -0,0 +1,93 @@
+import { AriaIdService } from '@/lib/utils/accessibility';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    forwardRef,
+    inject,
+    input,
+    output,
+    signal,
+} from '@angular/core';
+import { DRAWER_CONTEXT, type DrawerContextValue } from './drawer-context';
+
+/**
+ * Drawer component - a modal drawer that slides up from the bottom.
+ * Matches shadcn/ui React Drawer exactly with enhanced accessibility.
+ *
+ * @example
+ * <Drawer>
+ *   <DrawerTrigger>
+ *     <Button variant="outline">Open Drawer</Button>
+ *   </DrawerTrigger>
+ *   <DrawerContent>
+ *     <DrawerHeader>
+ *       <DrawerTitle>Drawer Title</DrawerTitle>
+ *       <DrawerDescription>Description</DrawerDescription>
+ *     </DrawerHeader>
+ *     Content here...
+ *     <DrawerFooter>
+ *       <Button>Submit</Button>
+ *       <DrawerClose>
+ *         <Button variant="outline">Cancel</Button>
+ *       </DrawerClose>
+ *     </DrawerFooter>
+ *   </DrawerContent>
+ * </Drawer>
+ */
+@Component({
+  selector: 'Drawer',
+  template: `<ng-content />`,
+  providers: [
+    {
+      provide: DRAWER_CONTEXT,
+      useExisting: forwardRef(() => Drawer),
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Drawer implements DrawerContextValue {
+  private readonly ariaIdService = inject(AriaIdService);
+  private readonly ariaIds = this.ariaIdService.generateDialogIds('drawer');
+
+  /** Default open state */
+  readonly defaultOpen = input<boolean>(false);
+
+  /** Controlled open state */
+  readonly controlledOpen = input<boolean | undefined>(undefined, { alias: 'open' });
+
+  /** Direction the drawer appears from */
+  readonly direction: 'top' | 'right' | 'bottom' | 'left' = 'bottom';
+
+  /** Whether to show the handle bar */
+  readonly shouldScaleBackground = input<boolean>(true);
+
+  /** Open change event */
+  readonly openChange = output<boolean>();
+
+  readonly open = signal(false);
+
+  /** ARIA IDs for accessibility */
+  readonly titleId = this.ariaIds.titleId;
+  readonly descriptionId = this.ariaIds.descriptionId;
+  readonly contentId = this.ariaIds.contentId;
+
+  /** Reference to the trigger element for focus restoration */
+  readonly triggerElement = signal<HTMLElement | null>(null);
+
+  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/drawer/index.ts

@@ -0,0 +1,10 @@
+export { DrawerClose } from './drawer-close.component';
+export { DrawerContent } from './drawer-content.component';
+export { DRAWER_CONTEXT, type DrawerContextValue } from './drawer-context';
+export { DrawerDescription } from './drawer-description.component';
+export { DrawerFooter } from './drawer-footer.component';
+export { DrawerHeader } from './drawer-header.component';
+export { DrawerTitle } from './drawer-title.component';
+export { DrawerTrigger } from './drawer-trigger.component';
+export { Drawer } from './drawer.component';
+

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

@@ -0,0 +1,68 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, inject, input, model, output } from '@angular/core';
+import { Check, LucideAngularModule } from 'lucide-angular';
+import { DROPDOWN_MENU_CONTEXT } from './dropdown-menu-context';
+
+/**
+ * DropdownMenuCheckboxItem component - a checkbox item in the dropdown.
+ * Matches shadcn/ui React DropdownMenuCheckboxItem exactly.
+ */
+@Component({
+  selector: 'DropdownMenuCheckboxItem',
+  imports: [LucideAngularModule],
+  template: `
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      @if (checked()) {
+        <lucide-icon [img]="CheckIcon" class="h-4 w-4" />
+      }
+    </span>
+    <ng-content />
+  `,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.role]': '"menuitemcheckbox"',
+    '[attr.aria-checked]': 'checked()',
+    '[attr.tabindex]': 'disabled() ? -1 : 0',
+    '[attr.aria-disabled]': 'disabled()',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+    '[attr.data-state]': 'checked() ? "checked" : "unchecked"',
+    '(click)': 'handleClick($event)',
+    '(keydown.enter)': 'handleClick($event)',
+    '(keydown.space)': 'handleClick($event)',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DropdownMenuCheckboxItem {
+  private readonly context = inject(DROPDOWN_MENU_CONTEXT);
+  protected readonly CheckIcon = Check;
+
+  /** Whether the checkbox is checked */
+  readonly checked = model<boolean>(false);
+
+  /** Whether the item is disabled */
+  readonly disabled = input<boolean>(false);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  /** Select event emitted when item is clicked */
+  readonly onCheckedChange = output<boolean>();
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      !this.disabled() && 'cursor-pointer hover:bg-accent hover:text-accent-foreground',
+      this.class()
+    )
+  );
+
+  protected handleClick(event: Event): void {
+    if (this.disabled()) {
+      event.preventDefault();
+      return;
+    }
+    const newValue = !this.checked();
+    this.checked.set(newValue);
+    this.onCheckedChange.emit(newValue);
+  }
+}