@ng-cn/core 1.0.15 → 1.0.17

package/src/app/lib/components/ui/pagination/pagination.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';
 
 /**
  * Pagination component - root container.
@@ -32,6 +27,7 @@ import {
   selector: 'Pagination',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"pagination"',
     role: 'navigation',
     '[attr.aria-label]': '"pagination"',
     '[class]': 'computedClass()',
@@ -43,6 +39,6 @@ export class Pagination {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('mx-auto flex w-full justify-center', this.class())
+    cn('mx-auto flex w-full justify-center', this.class()),
   );
 }

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

@@ -1,14 +1,17 @@
 // Context and types
 export {
-    POPOVER_CONTEXT,
-    type PopoverAlign,
-    type PopoverContextValue,
-    type PopoverSide
+  POPOVER_CONTEXT,
+  type PopoverAlign,
+  type PopoverContextValue,
+  type PopoverSide,
 } from './popover-context';
 
 // Components and their types
 export { PopoverAnchor, type PopoverAnchorProps } from './popover-anchor.component';
-export { PopoverContent, type PopoverContentProps, type PopoverContentState } from './popover-content.component';
+export {
+  PopoverContent,
+  type PopoverContentProps,
+  type PopoverContentState,
+} from './popover-content.component';
 export { PopoverTrigger, type PopoverTriggerProps } from './popover-trigger.component';
 export { Popover, type PopoverProps, type PopoverState } from './popover.component';
-

package/src/app/lib/components/ui/popover/popover-anchor.component.ts

@@ -1,12 +1,4 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    input,
-} from '@angular/core';
-
-// ============================================================================
-// Types
-// ============================================================================
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 /**
  * Props for the PopoverAnchor component
@@ -17,10 +9,6 @@ export interface PopoverAnchorProps {
   asChild?: boolean;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component PopoverAnchor
  *
@@ -54,6 +42,7 @@ export interface PopoverAnchorProps {
   selector: 'PopoverAnchor',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"popover-anchor"',
     class: 'inline-block',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -1,22 +1,18 @@
 import { Align, cn, computePosition, getTransformOrigin, Presence, Side } from '@/lib/utils';
 import {
-    afterNextRender,
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    ElementRef,
-    inject,
-    Injector,
-    input,
-    signal,
+  afterNextRender,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  inject,
+  Injector,
+  input,
+  signal,
 } from '@angular/core';
 import { POPOVER_CONTEXT, PopoverAlign, PopoverSide } from './popover-context';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type PopoverContentState = 'open' | 'closed';
 
 /**
@@ -43,12 +39,10 @@ export interface PopoverContentProps {
   collisionPadding?: number;
   /** Additional CSS classes */
   class?: string;
+  /** Whether the content should match the trigger width. */
+  matchTriggerWidth?: boolean;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component PopoverContent
  *
@@ -104,7 +98,7 @@ export interface PopoverContentProps {
         [attr.data-state]="state()"
         [attr.data-side]="computedSide()"
         [attr.data-align]="computedAlign()"
-        [style]="positionStyles()"
+        [style]="mergedStyles()"
         role="dialog"
         [attr.aria-modal]="context.modal() || null"
       >
@@ -113,6 +107,7 @@ export interface PopoverContentProps {
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"popover-content"',
     class: 'contents',
     '(document:click)': 'onDocumentClick($event)',
     '(document:keydown.escape)': 'onEscapeKey()',
@@ -120,65 +115,146 @@ export interface PopoverContentProps {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PopoverContent {
-  protected readonly context = inject(POPOVER_CONTEXT);
-  private readonly elementRef = inject(ElementRef);
-  private readonly injector = inject(Injector);
+  constructor() {
+    // Recalculate position when open state changes (browser-only via afterNextRender)
+    effect(() => {
+      const isOpen = this.context.open();
+      if (isOpen) {
+        this.isPositioned.set(false);
+        afterNextRender(
+          () => {
+            this.schedulePositionUpdate();
+          },
+          { injector: this._injector },
+        );
+      } else {
+        this.cancelScheduledPositionUpdate();
+        this.isPositioned.set(false);
+        this.positionStyles.set({
+          position: 'fixed',
+          top: '-9999px',
+          left: '-9999px',
+        });
+        this.matchedWidth.set(null);
+      }
+    });
+  }
 
   /** The preferred side of the anchor to render against */
   readonly side = input<Side>('bottom');
-
   /** The distance in pixels from the anchor */
   readonly sideOffset = input<number>(4);
-
   /** The preferred alignment against the anchor */
   readonly align = input<Align>('center');
-
   /** An offset in pixels from the alignment options */
   readonly alignOffset = input<number>(0);
-
   /** Whether to avoid collisions with viewport boundaries */
   readonly avoidCollisions = input<boolean>(true);
-
   /** The padding in pixels between the boundary edges and content */
   readonly collisionPadding = input<number>(8);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
+  /** Whether the content should match the trigger width */
+  readonly matchTriggerWidth = input<boolean>(false);
 
+  private readonly _elementRef = inject(ElementRef);
+  private readonly _injector = inject(Injector);
+
+  protected readonly context = inject(POPOVER_CONTEXT);
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'z-50 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
+      this.matchTriggerWidth() ? 'w-full' : 'w-72',
+      '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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
+      'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      !this.isPositioned() && 'pointer-events-none opacity-0',
+      this.class(),
+    ),
+  );
+  protected readonly mergedStyles = computed<Record<string, string>>(() => ({
+    ...this.positionStyles(),
+    ...(this.matchedWidth() !== null
+      ? {
+          width: `${this.matchedWidth()}px`,
+          minWidth: `${this.matchedWidth()}px`,
+          maxWidth: `${this.matchedWidth()}px`,
+        }
+      : {}),
+  }));
   /** Current state: open or closed */
   protected readonly state = computed<PopoverContentState>(() =>
-    this.context.open() ? 'open' : 'closed'
+    this.context.open() ? 'open' : 'closed',
   );
 
+  protected readonly isPositioned = signal(false);
   /** Computed position after collision detection */
   protected readonly computedSide = signal<Side>('bottom');
   protected readonly computedAlign = signal<Align>('center');
-  protected readonly positionStyles = signal<Record<string, string>>({});
+  protected readonly matchedWidth = signal<number | null>(null);
+  protected readonly positionStyles = signal<Record<string, string>>({
+    position: 'fixed',
+    top: '-9999px',
+    left: '-9999px',
+  });
 
-  constructor() {
-    // Recalculate position when open state changes (browser-only via afterNextRender)
-    effect(() => {
-      const isOpen = this.context.open();
-      if (isOpen) {
-        afterNextRender(() => {
-          this.updatePosition();
-        }, { injector: this.injector });
+  private positionFrameId: number | null = null;
+
+  onDocumentClick(event: Event): void {
+    const target = event.target as HTMLElement;
+    if (!this._elementRef.nativeElement.contains(target)) {
+      // Check if click is outside the popover
+      const popoverContent = this._elementRef.nativeElement.querySelector('[role="dialog"]');
+      if (popoverContent && !popoverContent.contains(target)) {
+        this.context.setOpen(false);
       }
-    });
+    }
+  }
+  onEscapeKey(): void {
+    this.context.setOpen(false);
   }
 
+  private schedulePositionUpdate(): void {
+    this.cancelScheduledPositionUpdate();
+
+    this.positionFrameId = requestAnimationFrame(() => {
+      this.updatePosition();
+
+      this.positionFrameId = requestAnimationFrame(() => {
+        this.updatePosition();
+        this.positionFrameId = null;
+      });
+    });
+  }
+  private cancelScheduledPositionUpdate(): void {
+    if (this.positionFrameId !== null) {
+      cancelAnimationFrame(this.positionFrameId);
+      this.positionFrameId = null;
+    }
+  }
   private updatePosition(): void {
     const triggerElement = this.context.triggerRef?.();
-    const contentElement = this.elementRef.nativeElement.querySelector('[role="dialog"]') as HTMLElement;
+    const contentElement = this._elementRef.nativeElement.querySelector(
+      '[role="dialog"]',
+    ) as HTMLElement;
 
     if (!triggerElement || !contentElement) return;
 
     const triggerRect = triggerElement.getBoundingClientRect();
     const contentRect = contentElement.getBoundingClientRect();
+    const overlayWidth = this.matchTriggerWidth()
+      ? Math.round(triggerRect.width)
+      : Math.round(contentRect.width || 288);
+    const overlayHeight = Math.round(contentRect.height || 100);
+
+    this.matchedWidth.set(this.matchTriggerWidth() ? overlayWidth : null);
 
     const result = computePosition(
       triggerRect,
-      { width: contentRect.width || 288, height: contentRect.height || 100 },
+      { width: overlayWidth, height: overlayHeight },
       {
         side: this.side(),
         align: this.align(),
@@ -186,7 +262,7 @@ export class PopoverContent {
         alignOffset: this.alignOffset(),
         avoidCollisions: this.avoidCollisions(),
         collisionPadding: this.collisionPadding(),
-      }
+      },
     );
 
     this.computedSide.set(result.side);
@@ -200,32 +276,6 @@ export class PopoverContent {
       left: result.styles.left || '',
       '--radix-popover-content-transform-origin': transformOrigin,
     });
-  }
-
-  protected readonly computedClass = computed(() =>
-    cn(
-      'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
-      '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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
-      'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-      this.class()
-    )
-  );
-
-  onDocumentClick(event: Event): void {
-    const target = event.target as HTMLElement;
-    if (!this.elementRef.nativeElement.contains(target)) {
-      // Check if click is outside the popover
-      const popoverContent = this.elementRef.nativeElement.querySelector('[role="dialog"]');
-      if (popoverContent && !popoverContent.contains(target)) {
-        this.context.setOpen(false);
-      }
-    }
-  }
-
-  onEscapeKey(): void {
-    this.context.setOpen(false);
+    this.isPositioned.set(true);
   }
 }

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

@@ -1,9 +1,5 @@
 import { InjectionToken, Signal, WritableSignal } from '@angular/core';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type PopoverSide = 'top' | 'right' | 'bottom' | 'left';
 export type PopoverAlign = 'start' | 'center' | 'end';
 
@@ -22,8 +18,4 @@ export interface PopoverContextValue {
   setTriggerRef?: (element: HTMLElement | null) => void;
 }
 
-// ============================================================================
-// Injection Tokens
-// ============================================================================
-
 export const POPOVER_CONTEXT = new InjectionToken<PopoverContextValue>('POPOVER_CONTEXT');

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

@@ -1,18 +1,14 @@
 import {
-    afterNextRender,
-    ChangeDetectionStrategy,
-    Component,
-    ElementRef,
-    inject,
-    input,
-    OnDestroy,
+  afterNextRender,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  inject,
+  input,
+  OnDestroy,
 } from '@angular/core';
 import { POPOVER_CONTEXT } from './popover-context';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 /**
  * Props for the PopoverTrigger component
  */
@@ -22,10 +18,6 @@ export interface PopoverTriggerProps {
   asChild?: boolean;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component PopoverTrigger
  *
@@ -67,6 +59,7 @@ export interface PopoverTriggerProps {
   selector: 'PopoverTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"popover-trigger"',
     '(click)': 'onClick($event)',
     '[attr.aria-expanded]': 'context.open()',
     '[attr.aria-haspopup]': '"dialog"',
@@ -75,19 +68,26 @@ export interface PopoverTriggerProps {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PopoverTrigger implements OnDestroy {
-  protected readonly context = inject(POPOVER_CONTEXT);
-  private readonly elementRef = inject(ElementRef);
-
-  /** Change the default rendered element for the one passed as a child */
-  readonly asChild = input<boolean>(false);
-
   constructor() {
     // Register this element as the trigger reference (browser-only)
     afterNextRender(() => {
-      this.context.setTriggerRef?.(this.elementRef.nativeElement);
+      const hostElement = this._elementRef.nativeElement as HTMLElement;
+      const triggerElement =
+        hostElement.firstElementChild instanceof HTMLElement
+          ? hostElement.firstElementChild
+          : hostElement;
+
+      this.context.setTriggerRef?.(triggerElement);
     });
   }
 
+  /** Change the default rendered element for the one passed as a child */
+  readonly asChild = input<boolean>(false);
+
+  private readonly _elementRef = inject(ElementRef);
+
+  protected readonly context = inject(POPOVER_CONTEXT);
+
   ngOnDestroy(): void {
     // Clean up trigger reference
     this.context.setTriggerRef?.(null);

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

@@ -1,17 +1,13 @@
 import {
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    input,
-    output,
-    signal,
+  ChangeDetectionStrategy,
+  Component,
+  forwardRef,
+  input,
+  output,
+  signal,
 } from '@angular/core';
 import { POPOVER_CONTEXT, type PopoverContextValue } from './popover-context';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type PopoverState = 'open' | 'closed';
 
 /**
@@ -31,10 +27,6 @@ export interface PopoverProps {
   modal?: boolean;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component Popover
  *
@@ -106,7 +98,8 @@ export interface PopoverProps {
   selector: 'Popover',
   template: `<ng-content />`,
   host: {
-    class: 'relative inline-block',
+    'attr.data-slot': '"popover"',
+    class: 'relative',
   },
   providers: [
     {
@@ -117,46 +110,40 @@ export interface PopoverProps {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Popover implements PopoverContextValue {
-  /** The open state of the popover when initially rendered */
-  readonly defaultOpen = input<boolean>(false);
+  constructor() {
+    // Initialize from defaultOpen
+    if (this.defaultOpen()) {
+      this.open.set(true);
+    }
+  }
 
-  /** The controlled open state of the popover */
-  readonly controlledOpen = input<boolean | undefined>(undefined, { alias: 'open' });
+  /** Event handler called when the open state changes */
+  readonly openChange = output<boolean>();
 
   /** The modality of the popover */
   readonly modal = input<boolean>(false);
-
-  /** Event handler called when the open state changes */
-  readonly openChange = output<boolean>();
+  /** The open state of the popover when initially rendered */
+  readonly defaultOpen = input<boolean>(false);
+  /** The controlled open state of the popover */
+  readonly controlledOpen = input<boolean | undefined>(undefined, { alias: 'open' });
 
   readonly open = signal(false);
-
   /** Reference to the trigger element for positioning */
   readonly triggerRef = signal<HTMLElement | null>(null);
 
-  constructor() {
-    // Initialize from defaultOpen
-    if (this.defaultOpen()) {
-      this.open.set(true);
-    }
-  }
-
   setOpen(open: boolean): void {
     if (this.controlledOpen() === undefined) {
       this.open.set(open);
     }
     this.openChange.emit(open);
   }
-
   toggle(): void {
     this.setOpen(!this.open());
   }
-
   /** Set the trigger element reference */
   setTriggerRef(element: HTMLElement | null): void {
     this.triggerRef.set(element);
   }
-
   isOpen(): boolean {
     return this.controlledOpen() !== undefined ? this.controlledOpen()! : this.open();
   }

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

@@ -1,6 +1 @@
-export {
-    Progress,
-    type ProgressProps,
-    type ProgressState
-} from './progress.component';
-
+export { Progress, type ProgressProps, type ProgressState } from './progress.component';

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

@@ -1,14 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
-
-// ============================================================================
-// Types
-// ============================================================================
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 export type ProgressState = 'indeterminate' | 'loading' | 'complete';
 
@@ -32,10 +23,6 @@ export type ProgressProps = {
   getValueLabel?: (value: number, max: number) => string;
 };
 
-// ============================================================================
-// Progress Component
-// ============================================================================
-
 /**
  * Progress component displays progress feedback for tasks and operations.
  * Based on Radix UI Progress primitive with shadcn/ui styling.
@@ -142,9 +129,7 @@ export class Progress {
    * Function to get value label for accessibility.
    * Receives current value and returns descriptive text.
    */
-  readonly getValueLabel = input<
-    ((value: number, max: number) => string) | undefined
-  >(undefined);
+  readonly getValueLabel = input<((value: number, max: number) => string) | undefined>(undefined);
 
   /** Additional CSS classes to apply to the root */
   readonly class = input<string>('');
@@ -154,17 +139,17 @@ export class Progress {
 
   /** Calculate percentage (0-100) */
   protected readonly percentage = computed(() => {
-    const val = this.value();
+    const currentValue = this.value();
     const maxVal = this.max();
-    if (val === null || maxVal === 0) return 0;
-    return Math.min(100, Math.max(0, (val / maxVal) * 100));
+    if (currentValue === null || maxVal === 0) return 0;
+    return Math.min(100, Math.max(0, (currentValue / maxVal) * 100));
   });
 
   /** Calculate state for data attribute */
   protected readonly state = computed((): ProgressState => {
-    const val = this.value();
-    if (val === null) return 'indeterminate';
-    return val >= this.max() ? 'complete' : 'loading';
+    const currentValue = this.value();
+    if (currentValue === null) return 'indeterminate';
+    return currentValue >= this.max() ? 'complete' : 'loading';
   });
 
   /** Compute aria-valuetext */
@@ -172,12 +157,12 @@ export class Progress {
     const customText = this.ariaValueText();
     if (customText) return customText;
 
-    const val = this.value();
-    if (val === null) return 'Loading';
+    const currentValue = this.value();
+    if (currentValue === null) return 'Loading';
 
     const getLabel = this.getValueLabel();
     if (getLabel) {
-      return getLabel(val, this.max());
+      return getLabel(currentValue, this.max());
     }
 
     return `${this.percentage().toFixed(0)}% complete`;
@@ -194,8 +179,8 @@ export class Progress {
       // Base styles
       'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
       // Custom classes
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
   /** Computed indicator class */
@@ -206,7 +191,7 @@ export class Progress {
       // Indeterminate animation
       this.state() === 'indeterminate' && 'animate-pulse',
       // Custom classes
-      this.indicatorClass()
-    )
+      this.indicatorClass(),
+    ),
   );
 }

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

@@ -3,8 +3,5 @@ export {
   type RadioGroupContext,
   type RadioGroupOrientation,
 } from './radio-group-context';
-export {
-  RadioGroupItem,
-  type RadioGroupItemProps,
-} from './radio-group-item.component';
+export { RadioGroupItem, type RadioGroupItemProps } from './radio-group-item.component';
 export { RadioGroup, type RadioGroupProps } from './radio-group.component';