@ng-cn/core 1.0.11 → 1.0.12

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

@@ -0,0 +1,231 @@
+import { Align, cn, computePosition, getTransformOrigin, Presence, Side } from '@/lib/utils';
+import {
+    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';
+
+/**
+ * Props for the PopoverContent component
+ */
+export interface PopoverContentProps {
+  /** The preferred side of the anchor to render against.
+   * @default 'bottom' */
+  side?: PopoverSide;
+  /** The distance in pixels from the anchor.
+   * @default 4 */
+  sideOffset?: number;
+  /** The preferred alignment against the anchor.
+   * @default 'center' */
+  align?: PopoverAlign;
+  /** An offset in pixels from the "start" or "end" alignment options.
+   * @default 0 */
+  alignOffset?: number;
+  /** Whether to avoid collisions with viewport boundaries.
+   * @default true */
+  avoidCollisions?: boolean;
+  /** The padding in pixels between the boundary edges and content.
+   * @default 8 */
+  collisionPadding?: number;
+  /** Additional CSS classes */
+  class?: string;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * @component PopoverContent
+ *
+ * The component that pops out when the popover is open.
+ *
+ * @description
+ * PopoverContent displays the floating content. It handles positioning,
+ * collision detection, and animations.
+ *
+ * ## Features
+ * - Configurable side (top, right, bottom, left)
+ * - Configurable alignment (start, center, end)
+ * - Collision detection and avoidance
+ * - Smooth enter/exit animations
+ * - Click outside to close
+ * - Escape key to close
+ *
+ * ## Accessibility
+ * - `role="dialog"` on the content
+ * - Focus management when opened
+ * - Escape key dismisses popover
+ *
+ * ## Keyboard Navigation
+ * - `Escape` - Close the popover
+ *
+ * @example Basic usage
+ * ```html
+ * <PopoverContent>
+ *   <p>Popover content</p>
+ * </PopoverContent>
+ * ```
+ *
+ * @example With custom positioning
+ * ```html
+ * <PopoverContent side="right" align="start" [sideOffset]="8">
+ *   <p>Right-aligned popover</p>
+ * </PopoverContent>
+ * ```
+ *
+ * @data-attributes
+ * - `data-state` - 'open' | 'closed'
+ * - `data-side` - 'top' | 'right' | 'bottom' | 'left'
+ * - `data-align` - 'start' | 'center' | 'end'
+ */
+@Component({
+  selector: 'PopoverContent',
+  imports: [Presence],
+  template: `
+    <Presence [present]="context.open()">
+      <div
+        #contentRef
+        [class]="computedClass()"
+        [attr.data-state]="state()"
+        [attr.data-side]="computedSide()"
+        [attr.data-align]="computedAlign()"
+        [style]="positionStyles()"
+        role="dialog"
+        [attr.aria-modal]="context.modal() || null"
+      >
+        <ng-content />
+      </div>
+    </Presence>
+  `,
+  host: {
+    class: 'contents',
+    '(document:click)': 'onDocumentClick($event)',
+    '(document:keydown.escape)': 'onEscapeKey()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PopoverContent {
+  protected readonly context = inject(POPOVER_CONTEXT);
+  private readonly elementRef = inject(ElementRef);
+  private readonly injector = inject(Injector);
+
+  /** 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>('');
+
+  /** Current state: open or closed */
+  protected readonly state = computed<PopoverContentState>(() =>
+    this.context.open() ? 'open' : 'closed'
+  );
+
+  /** Computed position after collision detection */
+  protected readonly computedSide = signal<Side>('bottom');
+  protected readonly computedAlign = signal<Align>('center');
+  protected readonly positionStyles = signal<Record<string, string>>({});
+
+  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 updatePosition(): void {
+    const triggerElement = this.context.triggerRef?.();
+    const contentElement = this.elementRef.nativeElement.querySelector('[role="dialog"]') as HTMLElement;
+
+    if (!triggerElement || !contentElement) return;
+
+    const triggerRect = triggerElement.getBoundingClientRect();
+    const contentRect = contentElement.getBoundingClientRect();
+
+    const result = computePosition(
+      triggerRect,
+      { width: contentRect.width || 288, height: contentRect.height || 100 },
+      {
+        side: this.side(),
+        align: this.align(),
+        sideOffset: this.sideOffset(),
+        alignOffset: this.alignOffset(),
+        avoidCollisions: this.avoidCollisions(),
+        collisionPadding: this.collisionPadding(),
+      }
+    );
+
+    this.computedSide.set(result.side);
+    this.computedAlign.set(result.align);
+
+    // Set position styles with transform origin for animations
+    const transformOrigin = getTransformOrigin(result.side, result.align);
+    this.positionStyles.set({
+      position: 'fixed',
+      top: result.styles.top || '',
+      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);
+  }
+}

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

@@ -0,0 +1,29 @@
+import { InjectionToken, Signal, WritableSignal } from '@angular/core';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type PopoverSide = 'top' | 'right' | 'bottom' | 'left';
+export type PopoverAlign = 'start' | 'center' | 'end';
+
+export interface PopoverContextValue {
+  /** Signal for open state */
+  open: WritableSignal<boolean>;
+  /** Set open state */
+  setOpen: (open: boolean) => void;
+  /** Toggle open state */
+  toggle: () => void;
+  /** Whether the popover is modal */
+  modal: () => boolean;
+  /** Reference to the trigger element for positioning */
+  triggerRef?: Signal<HTMLElement | null>;
+  /** Set the trigger element reference */
+  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

@@ -0,0 +1,100 @@
+import {
+    afterNextRender,
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    inject,
+    input,
+    OnDestroy,
+} from '@angular/core';
+import { POPOVER_CONTEXT } from './popover-context';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/**
+ * Props for the PopoverTrigger component
+ */
+export interface PopoverTriggerProps {
+  /** Change the default rendered element for the one passed as a child.
+   * @default false */
+  asChild?: boolean;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * @component PopoverTrigger
+ *
+ * The button that toggles the popover.
+ *
+ * @description
+ * PopoverTrigger wraps the element that opens/closes the popover when clicked.
+ * It registers itself as the positioning anchor for the popover content.
+ *
+ * ## Features
+ * - Click to toggle popover
+ * - Registers as positioning anchor
+ * - Proper ARIA attributes
+ *
+ * ## Accessibility
+ * - `aria-expanded` reflects open state
+ * - `aria-haspopup="dialog"` indicates popover type
+ *
+ * @example Basic usage
+ * ```html
+ * <PopoverTrigger>
+ *   <Button variant="outline">Open</Button>
+ * </PopoverTrigger>
+ * ```
+ *
+ * @example With icon button
+ * ```html
+ * <PopoverTrigger>
+ *   <Button variant="ghost" size="icon">
+ *     <SettingsIcon />
+ *   </Button>
+ * </PopoverTrigger>
+ * ```
+ *
+ * @data-attributes
+ * - `data-state` - 'open' | 'closed'
+ */
+@Component({
+  selector: 'PopoverTrigger',
+  template: `<ng-content />`,
+  host: {
+    '(click)': 'onClick($event)',
+    '[attr.aria-expanded]': 'context.open()',
+    '[attr.aria-haspopup]': '"dialog"',
+    '[attr.data-state]': 'context.open() ? "open" : "closed"',
+  },
+  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);
+    });
+  }
+
+  ngOnDestroy(): void {
+    // Clean up trigger reference
+    this.context.setTriggerRef?.(null);
+  }
+
+  onClick(event: Event): void {
+    event.stopPropagation();
+    this.context.toggle();
+  }
+}

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

@@ -0,0 +1,163 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    forwardRef,
+    input,
+    output,
+    signal,
+} from '@angular/core';
+import { POPOVER_CONTEXT, type PopoverContextValue } from './popover-context';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type PopoverState = 'open' | 'closed';
+
+/**
+ * Props for the Popover component
+ */
+export interface PopoverProps {
+  /** The open state of the popover when initially rendered.
+   * Use when you do not need to control its open state.
+   * @default false */
+  defaultOpen?: boolean;
+  /** The controlled open state of the popover.
+   * Must be used in conjunction with onOpenChange. */
+  open?: boolean;
+  /** The modality of the popover. When set to true,
+   * interaction with outside elements will be disabled and only popover content will be visible to screen readers.
+   * @default false */
+  modal?: boolean;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * @component Popover
+ *
+ * Displays rich content in a portal, triggered by a button.
+ *
+ * @description
+ * Popover provides a container for displaying floating content triggered by
+ * a button. It manages open/closed state and provides context for positioning.
+ *
+ * ## Features
+ * - Click to toggle open/close
+ * - Modal and non-modal modes
+ * - Click outside to close
+ * - Escape key to close
+ * - Controlled and uncontrolled usage
+ * - Collision-aware positioning
+ *
+ * ## Accessibility
+ * - `aria-expanded` on trigger
+ * - `aria-haspopup="dialog"` on trigger
+ * - `role="dialog"` on content
+ * - Focus management in modal mode
+ * - Escape key dismisses popover
+ *
+ * ## Keyboard Navigation
+ * - `Enter` / `Space` - Toggle popover (on trigger)
+ * - `Escape` - Close popover
+ *
+ * @example Basic usage
+ * ```html
+ * <Popover>
+ *   <PopoverTrigger>
+ *     <Button variant="outline">Open</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <p>Content here</p>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ *
+ * @example Controlled
+ * ```html
+ * <Popover [open]="isOpen" (openChange)="isOpen = $event">
+ *   <PopoverTrigger>
+ *     <Button>Settings</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     Settings panel content
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ *
+ * @example Modal mode
+ * ```html
+ * <Popover [modal]="true">
+ *   <PopoverTrigger>
+ *     <Button>Modal Popover</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     Focus is trapped here
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ *
+ * @data-attributes
+ * - `data-state` - 'open' | 'closed' (on content)
+ */
+@Component({
+  selector: 'Popover',
+  template: `<ng-content />`,
+  host: {
+    class: 'relative inline-block',
+  },
+  providers: [
+    {
+      provide: POPOVER_CONTEXT,
+      useExisting: forwardRef(() => Popover),
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Popover implements PopoverContextValue {
+  /** 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' });
+
+  /** The modality of the popover */
+  readonly modal = input<boolean>(false);
+
+  /** Event handler called when the open state changes */
+  readonly openChange = output<boolean>();
+
+  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

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