ngx-com 0.0.1 → 0.0.4

package/types/ngx-com-components-paginator.d.ts

@@ -0,0 +1,265 @@
+import * as i0 from '@angular/core';
+import { InputSignal, InputSignalWithTransform, OutputEmitterRef, Signal } from '@angular/core';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Event emitted when the paginator changes page index or page size.
+ */
+interface PageEvent {
+    /** The current zero-based page index. */
+    pageIndex: number;
+    /** The previous zero-based page index. */
+    previousPageIndex: number;
+    /** The current page size. */
+    pageSize: number;
+    /** The total number of items being paged. */
+    length: number;
+}
+/**
+ * Function signature for custom range label formatting.
+ * Used for i18n and custom label display.
+ *
+ * @param page Current page index (zero-based)
+ * @param pageSize Number of items per page
+ * @param length Total number of items
+ * @returns Formatted string to display (e.g., "1 – 10 of 100")
+ */
+type RangeLabelFn = (page: number, pageSize: number, length: number) => string;
+/**
+ * Default range label function.
+ * Produces output like "1 – 10 of 100" or "0 of 0" when empty.
+ */
+declare function defaultRangeLabel(page: number, pageSize: number, length: number): string;
+
+type PaginatorSize = 'sm' | 'md';
+type PaginatorLayout = 'compact' | 'spread';
+/**
+ * CVA variants for the paginator container.
+ * Controls overall layout and spacing.
+ */
+declare const paginatorContainerVariants: (props?: {
+    size?: PaginatorSize;
+    layout?: PaginatorLayout;
+}) => string;
+/**
+ * CVA variants for paginator navigation buttons.
+ * Controls button sizing, borders, and interactive states.
+ */
+declare const paginatorButtonVariants: (props?: {
+    size?: PaginatorSize;
+}) => string;
+/**
+ * CVA variants for the range label text.
+ * Controls typography and color.
+ */
+declare const paginatorRangeLabelVariants: (props?: {
+    size?: PaginatorSize;
+}) => string;
+/**
+ * CVA variants for the page size select element.
+ * Controls sizing and styling of the native select.
+ */
+declare const paginatorSelectVariants: (props?: {
+    size?: PaginatorSize;
+}) => string;
+/**
+ * CVA variants for numbered page buttons.
+ * Controls button sizing, active state, and interactive states.
+ */
+declare const paginatorPageButtonVariants: (props?: {
+    size?: PaginatorSize;
+    active?: boolean;
+}) => string;
+/**
+ * CVA variants for the ellipsis indicator.
+ * Controls sizing and styling of the "..." text.
+ */
+declare const paginatorEllipsisVariants: (props?: {
+    size?: PaginatorSize;
+}) => string;
+type PaginatorContainerVariants = VariantProps<typeof paginatorContainerVariants>;
+type PaginatorButtonVariants = VariantProps<typeof paginatorButtonVariants>;
+type PaginatorRangeLabelVariants = VariantProps<typeof paginatorRangeLabelVariants>;
+type PaginatorSelectVariants = VariantProps<typeof paginatorSelectVariants>;
+type PaginatorPageButtonVariants = VariantProps<typeof paginatorPageButtonVariants>;
+type PaginatorEllipsisVariants = VariantProps<typeof paginatorEllipsisVariants>;
+
+/** Represents a page number or ellipsis marker in the page range. */
+type PageRangeItem = number | 'ellipsis';
+/**
+ * Paginator component — provides navigation for paginated content.
+ *
+ * Displays navigation controls, optional page size selector, and range label
+ * showing current position within the data set. Supports numbered page buttons
+ * when `showPageNumbers` is enabled.
+ *
+ * @tokens `--color-foreground`, `--color-muted-foreground`,
+ *         `--color-border`, `--color-muted`,
+ *         `--color-disabled`, `--color-disabled-foreground`,
+ *         `--color-ring`, `--color-primary`, `--color-primary-foreground`
+ *
+ * @example Basic usage
+ * ```html
+ * <com-paginator
+ *   [length]="100"
+ *   [pageSize]="10"
+ *   [pageIndex]="0"
+ *   (page)="onPageChange($event)"
+ * />
+ * ```
+ *
+ * @example With page size options
+ * ```html
+ * <com-paginator
+ *   [length]="100"
+ *   [pageSize]="10"
+ *   [pageIndex]="0"
+ *   [pageSizeOptions]="[5, 10, 25, 50]"
+ *   (page)="onPageChange($event)"
+ * />
+ * ```
+ *
+ * @example With first/last buttons
+ * ```html
+ * <com-paginator
+ *   [length]="100"
+ *   [pageSize]="10"
+ *   [pageIndex]="0"
+ *   [showFirstLastButtons]="true"
+ *   (page)="onPageChange($event)"
+ * />
+ * ```
+ *
+ * @example With numbered page buttons
+ * ```html
+ * <com-paginator
+ *   [length]="97"
+ *   [pageSize]="10"
+ *   [showPageNumbers]="true"
+ *   (page)="onPageChange($event)"
+ * />
+ * ```
+ *
+ * @example Spread layout (summary left, controls right)
+ * ```html
+ * <com-paginator
+ *   [length]="97"
+ *   [pageSize]="10"
+ *   [showPageNumbers]="true"
+ *   layout="spread"
+ *   (page)="onPageChange($event)"
+ * />
+ * ```
+ *
+ * @example Small size
+ * ```html
+ * <com-paginator
+ *   [length]="50"
+ *   [pageSize]="10"
+ *   size="sm"
+ *   (page)="onPageChange($event)"
+ * />
+ * ```
+ *
+ * @example Custom range label (i18n)
+ * ```html
+ * <com-paginator
+ *   [length]="100"
+ *   [pageSize]="10"
+ *   [rangeLabel]="customLabel"
+ *   (page)="onPageChange($event)"
+ * />
+ * ```
+ * ```ts
+ * customLabel = (page, pageSize, length) => `Seite ${page + 1} von ${Math.ceil(length / pageSize)}`;
+ * ```
+ */
+declare class ComPaginator {
+    /** Page number buttons for keyboard navigation. */
+    private readonly pageButtons;
+    /** Total number of items being paged. */
+    readonly length: InputSignal<number>;
+    /** Number of items to display per page. */
+    readonly pageSize: InputSignal<number>;
+    /** Current zero-based page index. */
+    readonly pageIndex: InputSignal<number>;
+    /** Available page size options. Hides selector if empty. */
+    readonly pageSizeOptions: InputSignal<number[]>;
+    /** Whether to show first/last navigation buttons. */
+    readonly showFirstLastButtons: InputSignalWithTransform<boolean, unknown>;
+    /** Whether to show numbered page buttons. */
+    readonly showPageNumbers: InputSignalWithTransform<boolean, unknown>;
+    /** Whether all controls are disabled. */
+    readonly disabled: InputSignalWithTransform<boolean, unknown>;
+    /** Whether to hide the page size selector. */
+    readonly hidePageSize: InputSignalWithTransform<boolean, unknown>;
+    /** Size variant. */
+    readonly size: InputSignal<PaginatorSize>;
+    /** Layout variant. Only applies when showPageNumbers is true. */
+    readonly layout: InputSignal<PaginatorLayout>;
+    /** Number of pages to show on each side of the current page. */
+    readonly siblingCount: InputSignal<number>;
+    /** Number of pages to always show at the start and end. */
+    readonly boundaryCount: InputSignal<number>;
+    /** Accessible label for the nav element. */
+    readonly ariaLabel: InputSignal<string>;
+    /** Custom function for range label formatting. */
+    readonly rangeLabel: InputSignal<RangeLabelFn>;
+    /** Emits when page index or page size changes. */
+    readonly page: OutputEmitterRef<PageEvent>;
+    /** Total number of pages. */
+    protected readonly numberOfPages: Signal<number>;
+    /** Whether there is a previous page. */
+    protected readonly hasPreviousPage: Signal<boolean>;
+    /** Whether there is a next page. */
+    protected readonly hasNextPage: Signal<boolean>;
+    /** The formatted range label text. */
+    protected readonly rangeLabelText: Signal<string>;
+    /** Icon size based on component size. */
+    protected readonly iconSize: Signal<'xs' | 'sm'>;
+    /** Unique ID for page size label. */
+    protected readonly pageSizeLabelId: Signal<string>;
+    /** Classes for the container. */
+    protected readonly containerClasses: Signal<string>;
+    /** Classes for navigation buttons. */
+    protected readonly buttonClasses: Signal<string>;
+    /** Classes for the range label. */
+    protected readonly rangeLabelClasses: Signal<string>;
+    /** Classes for the page size select. */
+    protected readonly selectClasses: Signal<string>;
+    /** Classes for the ellipsis indicator. */
+    protected readonly ellipsisClasses: Signal<string>;
+    /** Cached classes for active page button. */
+    protected readonly activePageButtonClasses: Signal<string>;
+    /** Cached classes for inactive page button. */
+    protected readonly inactivePageButtonClasses: Signal<string>;
+    /**
+     * Computed page range for numbered pagination.
+     * Returns array like [0, 'ellipsis', 3, 4, 5, 'ellipsis', 9] (zero-indexed).
+     */
+    protected readonly pageRange: Signal<PageRangeItem[]>;
+    /** Navigate to the first page. */
+    firstPage(): void;
+    /** Navigate to the previous page. */
+    previousPage(): void;
+    /** Navigate to the next page. */
+    nextPage(): void;
+    /** Navigate to the last page. */
+    lastPage(): void;
+    /** Navigate to a specific page by index (zero-based). */
+    goToPage(pageIndex: number): void;
+    /** Handle page size selection change. */
+    protected onPageSizeChange(event: Event): void;
+    /** Handle keyboard navigation within page buttons (roving tabindex). */
+    protected onPageButtonsKeydown(event: KeyboardEvent): void;
+    /** Track function for page items. */
+    protected trackPageItem(index: number, item: PageRangeItem): string;
+    private emitPageEvent;
+    /** Generate a range of numbers from start to end (inclusive). */
+    private range;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComPaginator, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComPaginator, "com-paginator", ["comPaginator"], { "length": { "alias": "length"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageIndex": { "alias": "pageIndex"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "showFirstLastButtons": { "alias": "showFirstLastButtons"; "required": false; "isSignal": true; }; "showPageNumbers": { "alias": "showPageNumbers"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hidePageSize": { "alias": "hidePageSize"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "siblingCount": { "alias": "siblingCount"; "required": false; "isSignal": true; }; "boundaryCount": { "alias": "boundaryCount"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "rangeLabel": { "alias": "rangeLabel"; "required": false; "isSignal": true; }; }, { "page": "page"; }, never, never, true, never>;
+}
+
+export { ComPaginator, defaultRangeLabel, paginatorButtonVariants, paginatorContainerVariants, paginatorEllipsisVariants, paginatorPageButtonVariants, paginatorRangeLabelVariants, paginatorSelectVariants };
+export type { PageEvent, PageRangeItem, PaginatorButtonVariants, PaginatorContainerVariants, PaginatorEllipsisVariants, PaginatorLayout, PaginatorPageButtonVariants, PaginatorRangeLabelVariants, PaginatorSelectVariants, PaginatorSize, RangeLabelFn };

package/types/ngx-com-components-popover.d.ts

@@ -0,0 +1,309 @@
+import * as i0 from '@angular/core';
+import { InputSignal, TemplateRef, Type, InputSignalWithTransform, ModelSignal, OutputEmitterRef, Signal, InjectionToken } from '@angular/core';
+import { VariantProps, cva } from 'class-variance-authority';
+import { ConnectedPosition, ConnectionPositionPair } from '@angular/cdk/overlay';
+
+type PopoverPosition = 'above' | 'below' | 'left' | 'right' | 'auto';
+type PopoverAlignment = 'start' | 'center' | 'end';
+type PopoverTriggerOn = 'click' | 'focus' | 'manual';
+type PopoverVariant = 'default' | 'compact' | 'wide' | 'flush';
+type PopoverBackdrop = 'transparent' | 'dimmed' | 'none';
+type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Popover panel styling variants.
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-lg`, `--radius-popover`, `--radius-overlay`
+ */
+declare const popoverPanelVariants: ReturnType<typeof cva<{
+    variant: Record<PopoverVariant, string>;
+}>>;
+type PopoverPanelVariants = VariantProps<typeof popoverPanelVariants>;
+/**
+ * Popover arrow positioning variants.
+ * The arrow is positioned on the edge of the popover pointing toward the trigger.
+ *
+ * @tokens `--color-popover`, `--color-border`
+ */
+declare const popoverArrowVariants: ReturnType<typeof cva<{
+    side: Record<PopoverSide, string>;
+}>>;
+type PopoverArrowVariants = VariantProps<typeof popoverArrowVariants>;
+
+/**
+ * Popover trigger directive — manages the popover overlay lifecycle.
+ * Applied to the trigger element, it handles opening, closing, positioning,
+ * and accessibility for floating popover content.
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-lg`, `--color-ring`
+ *
+ * @example Basic usage with template
+ * ```html
+ * <button comButton [comPopoverTrigger]="helpContent">Help</button>
+ * <ng-template #helpContent>
+ *   <p>This is help content.</p>
+ * </ng-template>
+ * ```
+ *
+ * @example With positioning
+ * ```html
+ * <button
+ *   comButton
+ *   [comPopoverTrigger]="menuContent"
+ *   popoverPosition="below"
+ *   popoverAlignment="start"
+ *   [popoverShowArrow]="false"
+ * >
+ *   Menu
+ * </button>
+ * ```
+ *
+ * @example With component content
+ * ```html
+ * <button
+ *   comButton
+ *   [comPopoverTrigger]="UserProfilePopover"
+ *   [popoverData]="{ userId: user.id }"
+ * >
+ *   Profile
+ * </button>
+ * ```
+ *
+ * @example Manual control
+ * ```html
+ * <button
+ *   comButton
+ *   [comPopoverTrigger]="content"
+ *   popoverTriggerOn="manual"
+ *   [(popoverOpen)]="isOpen"
+ * >
+ *   Controlled
+ * </button>
+ * ```
+ */
+declare class PopoverTriggerDirective {
+    private readonly overlay;
+    private readonly elementRef;
+    private readonly viewContainerRef;
+    private readonly injector;
+    private readonly destroyRef;
+    private readonly focusTrapFactory;
+    private readonly document;
+    private overlayRef;
+    private focusTrap;
+    private scrollCleanup;
+    private readonly popoverId;
+    /** Content to render: TemplateRef or Component class. */
+    readonly comPopoverTrigger: InputSignal<TemplateRef<unknown> | Type<unknown>>;
+    /** Preferred position direction. */
+    readonly popoverPosition: InputSignal<PopoverPosition>;
+    /** Alignment along the cross-axis. */
+    readonly popoverAlignment: InputSignal<PopoverAlignment>;
+    /** What interaction opens the popover. */
+    readonly popoverTriggerOn: InputSignal<PopoverTriggerOn>;
+    /** Gap in px between trigger and popover edge. */
+    readonly popoverOffset: InputSignal<number>;
+    /** Whether to render the connecting arrow. */
+    readonly popoverShowArrow: InputSignalWithTransform<boolean, unknown>;
+    /** Size/padding preset for the content panel. */
+    readonly popoverVariant: InputSignal<PopoverVariant>;
+    /** Backdrop behavior. */
+    readonly popoverBackdrop: InputSignal<PopoverBackdrop>;
+    /** Close when clicking outside the popover. */
+    readonly popoverCloseOnOutside: InputSignalWithTransform<boolean, unknown>;
+    /** Close on Escape key. */
+    readonly popoverCloseOnEscape: InputSignalWithTransform<boolean, unknown>;
+    /** Close when ancestor scrollable container scrolls. */
+    readonly popoverCloseOnScroll: InputSignalWithTransform<boolean, unknown>;
+    /** Prevents opening when true. */
+    readonly popoverDisabled: InputSignalWithTransform<boolean, unknown>;
+    /** Two-way bindable open state. */
+    readonly popoverOpen: ModelSignal<boolean>;
+    /** Arbitrary data passed to the content component/template. */
+    readonly popoverData: InputSignal<unknown>;
+    /** Custom CSS class(es) on the overlay panel. */
+    readonly popoverPanelClass: InputSignal<string | string[]>;
+    /** Trap focus inside popover. */
+    readonly popoverTrapFocus: InputSignalWithTransform<boolean, unknown>;
+    /** Optional accessibility label for the popover dialog. */
+    readonly popoverAriaLabel: InputSignal<string | undefined>;
+    /** Emitted after popup opens and is visible. */
+    readonly popoverOpened: OutputEmitterRef<void>;
+    /** Emitted after popup closes and is detached. */
+    readonly popoverClosed: OutputEmitterRef<void>;
+    private readonly activeSide;
+    private readonly activeAlignment;
+    private readonly animationState;
+    private contentComponentRef;
+    private readonly hasBackdrop;
+    private readonly backdropClass;
+    protected readonly ariaControls: Signal<string | null>;
+    private readonly panelClassArray;
+    constructor();
+    /** Programmatically open the popover. */
+    open(): void;
+    /** Programmatically close the popover. */
+    close(): void;
+    /** Toggle the popover open/close state. */
+    toggle(): void;
+    /** Force recalculation of position. */
+    reposition(): void;
+    protected onTriggerClick(event: MouseEvent): void;
+    protected onTriggerFocus(): void;
+    protected onTriggerBlur(): void;
+    protected onEscapeKey(event: Event): void;
+    private openPopover;
+    private closePopover;
+    private subscribeToScrollEvents;
+    private unsubscribeFromScrollEvents;
+    private createOverlay;
+    private attachContent;
+    private updateContentComponentInputs;
+    private detachContent;
+    private subscribeToCloseEvents;
+    private setupFocusTrap;
+    private destroyFocusTrap;
+    private disposeOverlay;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PopoverTriggerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PopoverTriggerDirective, "[comPopoverTrigger]", ["comPopoverTrigger"], { "comPopoverTrigger": { "alias": "comPopoverTrigger"; "required": true; "isSignal": true; }; "popoverPosition": { "alias": "popoverPosition"; "required": false; "isSignal": true; }; "popoverAlignment": { "alias": "popoverAlignment"; "required": false; "isSignal": true; }; "popoverTriggerOn": { "alias": "popoverTriggerOn"; "required": false; "isSignal": true; }; "popoverOffset": { "alias": "popoverOffset"; "required": false; "isSignal": true; }; "popoverShowArrow": { "alias": "popoverShowArrow"; "required": false; "isSignal": true; }; "popoverVariant": { "alias": "popoverVariant"; "required": false; "isSignal": true; }; "popoverBackdrop": { "alias": "popoverBackdrop"; "required": false; "isSignal": true; }; "popoverCloseOnOutside": { "alias": "popoverCloseOnOutside"; "required": false; "isSignal": true; }; "popoverCloseOnEscape": { "alias": "popoverCloseOnEscape"; "required": false; "isSignal": true; }; "popoverCloseOnScroll": { "alias": "popoverCloseOnScroll"; "required": false; "isSignal": true; }; "popoverDisabled": { "alias": "popoverDisabled"; "required": false; "isSignal": true; }; "popoverOpen": { "alias": "popoverOpen"; "required": false; "isSignal": true; }; "popoverData": { "alias": "popoverData"; "required": false; "isSignal": true; }; "popoverPanelClass": { "alias": "popoverPanelClass"; "required": false; "isSignal": true; }; "popoverTrapFocus": { "alias": "popoverTrapFocus"; "required": false; "isSignal": true; }; "popoverAriaLabel": { "alias": "popoverAriaLabel"; "required": false; "isSignal": true; }; }, { "popoverOpen": "popoverOpenChange"; "popoverOpened": "popoverOpened"; "popoverClosed": "popoverClosed"; }, never, never, true, never>;
+}
+
+/**
+ * Convenience directive that closes the parent popover when clicked.
+ * Applied to elements inside the popover that should dismiss it.
+ *
+ * @example
+ * ```html
+ * <ng-template #confirmPop>
+ *   <div class="space-y-3">
+ *     <p>Are you sure?</p>
+ *     <div class="flex gap-2">
+ *       <button comButton variant="ghost" comPopoverClose>Cancel</button>
+ *       <button comButton (click)="confirm()" comPopoverClose>Confirm</button>
+ *     </div>
+ *   </div>
+ * </ng-template>
+ * ```
+ *
+ * @example With a result value
+ * ```html
+ * <button [comPopoverClose]="'confirmed'" (click)="onConfirm()">Yes</button>
+ * <button [comPopoverClose]="'cancelled'">No</button>
+ * ```
+ */
+declare class PopoverCloseDirective {
+    private readonly popoverRef;
+    /**
+     * Optional result value to pass when closing.
+     * This value is emitted via the trigger's close event.
+     */
+    readonly comPopoverClose: InputSignal<unknown>;
+    protected closePopover(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PopoverCloseDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PopoverCloseDirective, "[comPopoverClose]", ["comPopoverClose"], { "comPopoverClose": { "alias": "comPopoverClose"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Marker directive for lazy popover content templates.
+ * Applied to `<ng-template>` to indicate content that should be
+ * lazily instantiated when the popover opens.
+ *
+ * This directive is primarily semantic — it marks the template as popover content
+ * and provides access to the TemplateRef for potential content queries.
+ *
+ * @example
+ * ```html
+ * <button [comPopoverTrigger]="helpContent">Help</button>
+ * <ng-template comPopoverTemplate #helpContent>
+ *   <p>This is help content.</p>
+ * </ng-template>
+ * ```
+ *
+ * Note: You can also pass a template reference directly without this directive:
+ * ```html
+ * <button [comPopoverTrigger]="helpContent">Help</button>
+ * <ng-template #helpContent>
+ *   <p>This also works.</p>
+ * </ng-template>
+ * ```
+ */
+declare class PopoverTemplateDirective {
+    /** Reference to the template for rendering. */
+    readonly templateRef: TemplateRef<unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PopoverTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PopoverTemplateDirective, "[comPopoverTemplate]", ["comPopoverTemplate"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Interface for the popover reference injected into content.
+ * Provides methods to control the popover from within content.
+ */
+interface PopoverRef {
+    /** Programmatically open the popover. */
+    open(): void;
+    /** Programmatically close the popover. */
+    close(): void;
+    /** Toggle the popover open/close state. */
+    toggle(): void;
+    /** Force recalculation of position. */
+    reposition(): void;
+}
+/**
+ * Data passed to a component rendered inside the popover.
+ * Inject this token to access the data provided via `popoverData` input.
+ *
+ * @example
+ * ```ts
+ * @Component({ ... })
+ * export class UserProfilePopover {
+ *   readonly data = inject(POPOVER_DATA); // { userId: '123' }
+ * }
+ * ```
+ */
+declare const POPOVER_DATA: InjectionToken<unknown>;
+/**
+ * Reference to the popover trigger directive for closing from inside the popover.
+ * Inject this token to programmatically close the popover from within content.
+ *
+ * @example
+ * ```ts
+ * @Component({ ... })
+ * export class UserProfilePopover {
+ *   readonly popoverRef = inject(POPOVER_REF);
+ *
+ *   save(): void {
+ *     // ... save logic
+ *     this.popoverRef.close();
+ *   }
+ * }
+ * ```
+ */
+declare const POPOVER_REF: InjectionToken<PopoverRef>;
+
+/**
+ * Build an ordered list of position pairs for the CDK overlay.
+ * The first position is the preferred position; remaining positions are fallbacks.
+ *
+ * @param position - Preferred position direction ('above', 'below', 'left', 'right', 'auto')
+ * @param alignment - Alignment along the cross-axis ('start', 'center', 'end')
+ * @param offset - Gap in pixels between trigger and popover edge (default: 8)
+ * @returns Array of ConnectedPosition for FlexibleConnectedPositionStrategy
+ */
+declare function buildPopoverPositions(position: PopoverPosition, alignment: PopoverAlignment, offset?: number): ConnectedPosition[];
+/**
+ * Derive which side of the trigger the popover is on from a connection pair.
+ * Used to position the arrow correctly.
+ *
+ * The returned side indicates where the popover sits relative to the trigger:
+ * - 'bottom': popover is below trigger, arrow at top pointing up
+ * - 'top': popover is above trigger, arrow at bottom pointing down
+ * - 'right': popover is right of trigger, arrow at left pointing left
+ * - 'left': popover is left of trigger, arrow at right pointing right
+ */
+declare function deriveSideFromPosition(pair: ConnectionPositionPair): PopoverSide;
+/**
+ * Derive alignment from a connection pair.
+ */
+declare function deriveAlignmentFromPosition(pair: ConnectionPositionPair): PopoverAlignment;
+
+export { POPOVER_DATA, POPOVER_REF, PopoverCloseDirective, PopoverTemplateDirective, PopoverTriggerDirective, buildPopoverPositions, deriveAlignmentFromPosition, deriveSideFromPosition, popoverArrowVariants, popoverPanelVariants };
+export type { PopoverAlignment, PopoverArrowVariants, PopoverBackdrop, PopoverPanelVariants, PopoverPosition, PopoverRef, PopoverSide, PopoverTriggerOn, PopoverVariant };