@ng-cn/core 1.0.17 → 1.0.20

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

@@ -11,6 +11,7 @@ import {
   Injector,
   input,
   OnDestroy,
+  signal,
   viewChild,
 } from '@angular/core';
 import { DRAWER_CONTEXT } from './drawer-context';
@@ -35,6 +36,7 @@ import { DRAWER_CONTEXT } from './drawer-context';
       <div
         #contentEl
         [class]="computedClass()"
+        [style]="swipeStyle()"
         [attr.data-state]="context.open() ? 'open' : 'closed'"
         role="dialog"
         aria-modal="true"
@@ -44,6 +46,9 @@ import { DRAWER_CONTEXT } from './drawer-context';
         hlmFocusTrap
         [trapFocus]="context.open()"
         (keydown.escape)="onEscapeKey()"
+        (touchstart)="onTouchStart($event)"
+        (touchmove)="onTouchMove($event)"
+        (touchend)="onTouchEnd()"
       >
         <!-- Handle -->
         <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted"></div>
@@ -105,6 +110,17 @@ export class DrawerContent implements OnDestroy {
     );
   });
 
+  protected readonly swipeDelta = signal(0);
+  private touchStartCoord = 0;
+
+  protected readonly swipeStyle = computed(() => {
+    const delta = this.swipeDelta();
+    if (delta === 0) return '';
+    const dir = this.context.direction;
+    if (dir === 'bottom' || dir === 'top') return { transform: `translateY(${delta}px)` };
+    return { transform: `translateX(${delta}px)` };
+  });
+
   /** Previous body overflow style for restoration */
   private previousBodyOverflow = '';
 
@@ -119,6 +135,34 @@ export class DrawerContent implements OnDestroy {
   onEscapeKey(): void {
     this.context.setOpen(false);
   }
+  onTouchStart(event: TouchEvent): void {
+    const touch = event.touches[0];
+    const dir = this.context.direction;
+    this.touchStartCoord = dir === 'bottom' || dir === 'top' ? touch.clientY : touch.clientX;
+  }
+  onTouchMove(event: TouchEvent): void {
+    const touch = event.touches[0];
+    const dir = this.context.direction;
+    const coord = dir === 'bottom' || dir === 'top' ? touch.clientY : touch.clientX;
+    const rawDelta = coord - this.touchStartCoord;
+    // Only allow dragging in the "away" direction
+    const isAway =
+      (dir === 'bottom' && rawDelta > 0) ||
+      (dir === 'top' && rawDelta < 0) ||
+      (dir === 'right' && rawDelta > 0) ||
+      (dir === 'left' && rawDelta < 0);
+    this.swipeDelta.set(isAway ? rawDelta : 0);
+  }
+  onTouchEnd(): void {
+    const threshold = 80;
+    if (Math.abs(this.swipeDelta()) >= threshold) {
+      this.swipeDelta.set(0);
+      this.context.setOpen(false);
+    } else {
+      this.swipeDelta.set(0);
+    }
+    this.touchStartCoord = 0;
+  }
 
   private focusFirstElement(): void {
     setTimeout(() => {

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

@@ -55,29 +55,31 @@ export class DropdownMenuContent implements OnDestroy {
     effect(() => {
       if (this.context.open()) {
         if (this.strategy() === 'fixed') {
-          const trigger = this.context.triggerElement();
-          if (trigger) {
-            const rect = trigger.getBoundingClientRect();
-            const side = this.side();
-            const offset = this.sideOffset();
-            let top = rect.top;
-            let left = rect.left;
+          if (typeof window !== 'undefined') {
+            const trigger = this.context.triggerElement();
+            if (trigger) {
+              const rect = trigger.getBoundingClientRect();
+              const side = this.side();
+              const offset = this.sideOffset();
+              let top = rect.top;
+              let left = rect.left;
 
-            if (side === 'bottom') {
-              top = rect.bottom + offset;
-              left = rect.left;
-            } else if (side === 'top') {
-              top = rect.top - offset;
-              left = rect.left;
-            } else if (side === 'right') {
-              top = rect.top;
-              left = rect.right + offset;
-            } else if (side === 'left') {
-              top = rect.top;
-              left = rect.left - offset;
-            }
+              if (side === 'bottom') {
+                top = rect.bottom + offset;
+                left = rect.left;
+              } else if (side === 'top') {
+                top = rect.top - offset;
+                left = rect.left;
+              } else if (side === 'right') {
+                top = rect.top;
+                left = rect.right + offset;
+              } else if (side === 'left') {
+                top = rect.top;
+                left = rect.left - offset;
+              }
 
-            this.fixedPos.set({ top, left });
+              this.fixedPos.set({ top, left });
+            }
           }
         } else {
           this.fixedPos.set(null);
@@ -111,7 +113,7 @@ export class DropdownMenuContent implements OnDestroy {
   /** Additional CSS classes */
   readonly class = input<string>('');
   /** Positioning strategy: 'absolute' stays within parent, 'fixed' escapes overflow containers */
-  readonly strategy = input<'absolute' | 'fixed'>('absolute');
+  readonly strategy = input<'absolute' | 'fixed'>('fixed');
 
   private readonly _elementRef = inject(ElementRef);
 
@@ -198,7 +200,7 @@ export class DropdownMenuContent implements OnDestroy {
     if (content) {
       this.menuItems = Array.from(
         content.querySelectorAll(
-          '[role="menuitem"]:not([aria-disabled="true"]):not([data-disabled])',
+          '[role="menuitem"]:not([aria-disabled="true"]):not([data-disabled=""])',
         ),
       );
     }

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

@@ -67,5 +67,6 @@ export class DropdownMenuRadioItem {
     }
     this._radioGroupContext.setValue(this.value());
     this.onSelect.emit();
+    this._context.open.set(false);
   }
 }

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

@@ -43,9 +43,11 @@ export class DropdownMenuSubContent {
   );
 
   protected onMouseEnter(): void {
+    this.subContext.isMouseInSubContent.set(true);
     this.subContext.open.set(true);
   }
   protected onMouseLeave(): void {
+    this.subContext.isMouseInSubContent.set(false);
     this.subContext.open.set(false);
   }
 }

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

@@ -19,7 +19,12 @@ import { DROPDOWN_MENU_SUB_CONTEXT } from './dropdown-menu-sub.component';
     '[class]': 'computedClass()',
     '(mouseenter)': 'onMouseEnter()',
     '(mouseleave)': 'onMouseLeave()',
+    '(keydown)': 'onKeyDown($event)',
     '[attr.data-state]': 'subContext.open() ? "open" : "closed"',
+    'role': 'menuitem',
+    '[attr.aria-haspopup]': '"menu"',
+    '[attr.aria-expanded]': 'subContext.open()',
+    '[attr.tabindex]': '"-1"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -46,9 +51,30 @@ export class DropdownMenuSubTrigger {
     this.subContext.open.set(true);
   }
   protected onMouseLeave(): void {
-    // Delay closing to allow mouse to move to sub-content
     setTimeout(() => {
-      // Check if mouse is still outside both trigger and content
+      if (!this.subContext.isMouseInSubContent()) {
+        this.subContext.open.set(false);
+      }
     }, 100);
   }
+  protected onKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'ArrowRight' || event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      event.stopPropagation();
+      this.subContext.open.set(true);
+      // Focus first focusable item in sub-content after it renders
+      setTimeout(() => {
+        const subContent = (event.target as HTMLElement)
+          .closest('DropdownMenuSub')
+          ?.querySelector<HTMLElement>('[role="menu"] [role="menuitem"]:not([aria-disabled="true"]):not([data-disabled=""])');
+        if (subContent) {
+          subContent.focus();
+        }
+      }, 10);
+    }
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      this.subContext.open.set(false);
+    }
+  }
 }

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

@@ -8,6 +8,8 @@ import {
 
 export interface DropdownMenuSubContext {
   open: WritableSignal<boolean>;
+  /** True while the mouse is hovering over the sub-content panel */
+  isMouseInSubContent: WritableSignal<boolean>;
 }
 
 export const DROPDOWN_MENU_SUB_CONTEXT = new InjectionToken<DropdownMenuSubContext>(
@@ -26,6 +28,7 @@ export const DROPDOWN_MENU_SUB_CONTEXT = new InjectionToken<DropdownMenuSubConte
       provide: DROPDOWN_MENU_SUB_CONTEXT,
       useFactory: (): DropdownMenuSubContext => ({
         open: signal(false),
+        isMouseInSubContent: signal(false),
       }),
     },
   ],

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

@@ -36,6 +36,31 @@ export class DropdownMenuTrigger {
         this.context.open.set(true);
         this.context.focusedIndex.set(0);
         break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.context.triggerElement.set(this._elementRef.nativeElement);
+        this.context.open.set(true);
+        // Set focusedIndex to -1 so the content effect opens normally,
+        // then after it renders and focuses the first item we move to last.
+        this.context.focusedIndex.set(-1);
+        setTimeout(() => {
+          // After the content's own setTimeout(0) has run and focused item[0],
+          // query the menu items and focus the last one.
+          const menu = document.querySelector('[data-slot="dropdown-menu-content"] [role="menu"]');
+          if (menu) {
+            const items = Array.from(
+              menu.querySelectorAll<HTMLElement>(
+                '[role="menuitem"]:not([aria-disabled="true"]):not([data-disabled=""])',
+              ),
+            );
+            if (items.length > 0) {
+              const lastIndex = items.length - 1;
+              items[lastIndex].focus();
+              this.context.focusedIndex.set(lastIndex);
+            }
+          }
+        }, 10);
+        break;
       case 'Enter':
       case ' ':
         event.preventDefault();

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

@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'EmptyAction',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"empty-action"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'EmptyDescription',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"empty-description"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'EmptyIcon',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"empty-icon"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -19,7 +20,7 @@ export class EmptyIcon {
   /** Computed class combining base styles and custom classes */
   protected readonly computedClass = computed(() =>
     cn(
-      'mx-auto flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground [&>svg]:size-6',
+      'mx-auto flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground [&>svg]:size-6 [&>lucide-icon]:size-6',
       this.class(),
     ),
   );

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

@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'EmptyTitle',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"empty-title"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -30,6 +30,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'Empty',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"empty"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -0,0 +1,34 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * FieldContent component - groups a field's title/label and description,
+ * useful in horizontal orientation next to a control.
+ *
+ * @example
+ * <Field orientation="horizontal">
+ *   <FieldContent>
+ *     <FieldTitle>Enable notifications</FieldTitle>
+ *     <FieldDescription>Receive updates about your account.</FieldDescription>
+ *   </FieldContent>
+ *   <Switch />
+ * </Field>
+ */
+@Component({
+  selector: 'FieldContent',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"field-content"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FieldContent {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', this.class()),
+  );
+}

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

@@ -0,0 +1,35 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * FieldDescription component - helper text for a Field.
+ *
+ * @example
+ * <Field>
+ *   <FieldLabel htmlFor="email">Email</FieldLabel>
+ *   <input Input id="email" type="email" />
+ *   <FieldDescription>We will never share your email.</FieldDescription>
+ * </Field>
+ */
+@Component({
+  selector: 'FieldDescription',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"field-description"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FieldDescription {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      'text-muted-foreground text-sm leading-normal font-normal',
+      'group-has-[[data-orientation=horizontal]]/field:text-balance',
+      this.class(),
+    ),
+  );
+}

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

@@ -0,0 +1,48 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * FieldError component - validation error message(s) for a Field.
+ *
+ * @example
+ * <!-- With projected content -->
+ * <FieldError>This field is required.</FieldError>
+ *
+ * <!-- With an errors array -->
+ * <FieldError [errors]="['Too short.', 'Must include a number.']" />
+ */
+@Component({
+  selector: 'FieldError',
+  template: `
+    @if (errors() && errors()!.length > 0) {
+      @if (errors()!.length === 1) {
+        {{ errors()![0] }}
+      } @else {
+        <ul class="ml-4 flex list-disc flex-col gap-1">
+          @for (error of errors(); track error) {
+            <li>{{ error }}</li>
+          }
+        </ul>
+      }
+    }
+    <ng-content />
+  `,
+  host: {
+    'attr.data-slot': '"field-error"',
+    role: 'alert',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FieldError {
+  /** List of error messages to render. When omitted, projected content is shown. */
+  readonly errors = input<string[] | undefined>(undefined);
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('text-destructive text-sm font-normal', this.class()),
+  );
+}

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

@@ -0,0 +1,34 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * FieldGroup component - container that stacks multiple Field components.
+ *
+ * @example
+ * <FieldGroup>
+ *   <Field>...</Field>
+ *   <FieldSeparator />
+ *   <Field>...</Field>
+ * </FieldGroup>
+ */
+@Component({
+  selector: 'FieldGroup',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"field-group"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FieldGroup {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3',
+      this.class(),
+    ),
+  );
+}

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

@@ -0,0 +1,46 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * FieldLabel component - label for a form control inside a Field.
+ * Renders a native label element for accessibility.
+ *
+ * @example
+ * <FieldLabel htmlFor="username">Username</FieldLabel>
+ * <input Input id="username" />
+ */
+@Component({
+  selector: 'FieldLabel',
+  template: `
+    <label class="contents" [attr.for]="forId()">
+      <ng-content />
+    </label>
+  `,
+  host: {
+    'attr.data-slot': '"field-label"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FieldLabel {
+  /** ID of the form element this label is for */
+  readonly for = input<string>();
+
+  /** Alternative binding for 'for' attribute (React-style) */
+  readonly htmlFor = input<string>();
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed ID - prefers 'for' over 'htmlFor' */
+  protected readonly forId = computed(() => this.for() || this.htmlFor());
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+      'text-sm font-medium',
+      this.class(),
+    ),
+  );
+}

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

@@ -0,0 +1,41 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+export type FieldLegendVariant = 'legend' | 'label';
+
+/**
+ * FieldLegend component - legend/title for a FieldSet.
+ *
+ * @example
+ * <FieldLegend>Address Information</FieldLegend>
+ *
+ * <!-- Label-sized legend -->
+ * <FieldLegend variant="label">Notifications</FieldLegend>
+ */
+@Component({
+  selector: 'FieldLegend',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"field-legend"',
+    '[attr.data-variant]': 'variant()',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FieldLegend {
+  /** The visual variant of the legend */
+  readonly variant = input<FieldLegendVariant>('legend');
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      'mb-3 font-medium',
+      'data-[variant=legend]:text-base',
+      'data-[variant=label]:text-sm',
+      this.class(),
+    ),
+  );
+}

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

@@ -0,0 +1,49 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * FieldSeparator component - visual divider between fields,
+ * with optional centered content text (e.g. "Or continue with").
+ *
+ * @example
+ * <!-- Plain separator -->
+ * <FieldSeparator />
+ *
+ * <!-- With centered content -->
+ * <FieldSeparator content="Or continue with" />
+ */
+@Component({
+  selector: 'FieldSeparator',
+  template: `
+    <div class="bg-border absolute inset-0 top-1/2 h-px w-full" aria-hidden="true"></div>
+    @if (content()) {
+      <span
+        class="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+        data-slot="field-separator-content"
+      >
+        {{ content() }}
+      </span>
+    }
+  `,
+  host: {
+    'attr.data-slot': '"field-separator"',
+    '[attr.data-content]': 'hasContent()',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FieldSeparator {
+  /** Optional content text rendered centered on the separator line */
+  readonly content = input<string>('');
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Whether content text is present */
+  protected readonly hasContent = computed(() => !!this.content());
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('relative -my-2 h-5 text-sm', this.class()),
+  );
+}

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

@@ -0,0 +1,37 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * FieldSet component - groups related fields together with fieldset semantics.
+ *
+ * @example
+ * <FieldSet>
+ *   <FieldLegend>Profile</FieldLegend>
+ *   <FieldGroup>
+ *     <Field>...</Field>
+ *   </FieldGroup>
+ * </FieldSet>
+ */
+@Component({
+  selector: 'FieldSet',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"field-set"',
+    role: 'group',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FieldSet {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex flex-col gap-6',
+      'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+      this.class(),
+    ),
+  );
+}