ngx-com 0.0.1 → 0.0.4

package/fesm2022/ngx-com-components-popover.mjs

@@ -0,0 +1,901 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, signal, InjectionToken, inject, ElementRef, ViewContainerRef, Injector, DestroyRef, booleanAttribute, model, output, effect, TemplateRef, Directive } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { DOCUMENT } from '@angular/common';
+import { Overlay } from '@angular/cdk/overlay';
+import { CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
+import { FocusTrapFactory } from '@angular/cdk/a11y';
+import { filter } from 'rxjs/operators';
+import { cva } from 'class-variance-authority';
+import { mergeClasses } from 'ngx-com/utils';
+
+// ─── Popover Panel Variants ───
+/**
+ * Popover panel styling variants.
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-lg`, `--radius-popover`, `--radius-overlay`
+ */
+const popoverPanelVariants = cva(['relative', 'bg-popover text-popover-foreground', 'border border-border', 'shadow-lg', 'overflow-hidden'], {
+    variants: {
+        variant: {
+            default: 'rounded-popover p-4 min-w-48 max-w-sm',
+            compact: 'rounded-overlay p-2 min-w-32 max-w-xs',
+            wide: 'rounded-popover p-5 min-w-64 max-w-lg',
+            flush: 'rounded-popover p-0',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+// ─── Popover Arrow Variants ───
+/**
+ * Popover arrow positioning variants.
+ * The arrow is positioned on the edge of the popover pointing toward the trigger.
+ *
+ * @tokens `--color-popover`, `--color-border`
+ */
+const popoverArrowVariants = cva('absolute z-10 text-popover', {
+    variants: {
+        side: {
+            top: 'left-1/2 top-full -translate-x-1/2 -translate-y-px rotate-180',
+            bottom: 'left-1/2 bottom-full -translate-x-1/2 translate-y-px',
+            left: 'top-1/2 right-0 -translate-y-1/2 translate-x-[11px] rotate-90',
+            right: 'top-1/2 left-0 -translate-y-1/2 -translate-x-[11px] -rotate-90',
+        },
+    },
+    defaultVariants: {
+        side: 'bottom',
+    },
+});
+
+let popoverIdCounter = 0;
+/**
+ * Generate a unique ID for a popover instance.
+ */
+function generatePopoverId() {
+    return `popover-${++popoverIdCounter}`;
+}
+
+/** Alignment offset classes for arrow positioning. */
+const ALIGNMENT_OFFSETS = {
+    top: { start: 'left-4 -translate-x-0', center: '', end: 'left-auto right-4 translate-x-0' },
+    bottom: { start: 'left-4 -translate-x-0', center: '', end: 'left-auto right-4 translate-x-0' },
+    left: { start: 'top-4 -translate-y-0', center: '', end: 'top-auto bottom-4 translate-y-0' },
+    right: { start: 'top-4 -translate-y-0', center: '', end: 'top-auto bottom-4 translate-y-0' },
+};
+/**
+ * Internal arrow component rendered inside the popover panel.
+ * Points toward the trigger element based on the active position.
+ *
+ * @internal Not exported in public API
+ *
+ * @tokens `--color-popover`, `--color-border`
+ */
+class PopoverArrowComponent {
+    /** Which side of the popover the arrow is on. */
+    side = input('top', ...(ngDevMode ? [{ debugName: "side" }] : []));
+    /** Alignment along the edge (for offset positioning). */
+    alignment = input('center', ...(ngDevMode ? [{ debugName: "alignment" }] : []));
+    /** Computed CSS classes for the arrow. */
+    arrowClasses = computed(() => mergeClasses(popoverArrowVariants({ side: this.side() }), ALIGNMENT_OFFSETS[this.side()][this.alignment()]), ...(ngDevMode ? [{ debugName: "arrowClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoverArrowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: PopoverArrowComponent, isStandalone: true, selector: "com-popover-arrow", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "pointer-events-none" }, ngImport: i0, template: `
+    <svg
+      [class]="arrowClasses()"
+      width="16"
+      height="8"
+      viewBox="0 0 16 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <!-- Border stroke (rendered underneath) -->
+      <path
+        d="M0 8L8 1L16 8"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1"
+        class="text-border"
+      />
+      <!-- Fill (covers the stroke at the base) -->
+      <path d="M1 8L8 1.5L15 8" fill="currentColor" class="text-popover" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoverArrowComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'com-popover-arrow',
+                    template: `
+    <svg
+      [class]="arrowClasses()"
+      width="16"
+      height="8"
+      viewBox="0 0 16 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <!-- Border stroke (rendered underneath) -->
+      <path
+        d="M0 8L8 1L16 8"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1"
+        class="text-border"
+      />
+      <!-- Fill (covers the stroke at the base) -->
+      <path d="M1 8L8 1.5L15 8" fill="currentColor" class="text-popover" />
+    </svg>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'pointer-events-none',
+                    },
+                }]
+        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }] } });
+
+/**
+ * Internal content wrapper component for the popover.
+ * Renders the panel styling, arrow, and consumer content.
+ *
+ * @internal Not exported in public API
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-lg`, `--radius-popover`, `--radius-overlay`
+ */
+class PopoverContentComponent {
+    /** The portal containing consumer content to render. */
+    contentPortal = signal(null, ...(ngDevMode ? [{ debugName: "contentPortal" }] : []));
+    /** Size/padding variant for the panel. */
+    variant = signal('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Whether to render the arrow. */
+    showArrow = signal(true, ...(ngDevMode ? [{ debugName: "showArrow" }] : []));
+    /** Which side the popover is on relative to the trigger. */
+    activeSide = signal('top', ...(ngDevMode ? [{ debugName: "activeSide" }] : []));
+    /** Alignment along the cross-axis. */
+    activeAlignment = signal('center', ...(ngDevMode ? [{ debugName: "activeAlignment" }] : []));
+    /** Unique ID for accessibility. */
+    popoverId = signal('', ...(ngDevMode ? [{ debugName: "popoverId" }] : []));
+    /** Optional accessibility label. */
+    ariaLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Animation state for enter/leave. */
+    animationState = signal('open', ...(ngDevMode ? [{ debugName: "animationState" }] : []));
+    /** Additional CSS classes for the panel. */
+    panelClass = signal('', ...(ngDevMode ? [{ debugName: "panelClass" }] : []));
+    /** Computed CSS classes for the panel. */
+    panelClasses = computed(() => mergeClasses(popoverPanelVariants({ variant: this.variant() }), this.panelClass()), ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PopoverContentComponent, isStandalone: true, selector: "com-popover-content", ngImport: i0, template: `
+    <div
+      class="relative"
+      [attr.data-state]="animationState()"
+      [attr.data-side]="activeSide()"
+    >
+      @if (showArrow()) {
+        <com-popover-arrow [side]="activeSide()" [alignment]="activeAlignment()" />
+      }
+      <div
+        [class]="panelClasses()"
+        role="dialog"
+        [attr.id]="popoverId()"
+        [attr.aria-label]="ariaLabel() || null"
+      >
+        <ng-template [cdkPortalOutlet]="contentPortal()" />
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:contents}[data-state=open]{animation:popover-in .15s ease-out}[data-state=closed]{animation:popover-out .1s ease-in forwards}[data-side=top]{transform-origin:bottom center}[data-side=bottom]{transform-origin:top center}[data-side=left]{transform-origin:right center}[data-side=right]{transform-origin:left center}@keyframes popover-in{0%{opacity:0;transform:scale(.96) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes popover-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){[data-state=open],[data-state=closed]{animation:none}}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: PopoverArrowComponent, selector: "com-popover-arrow", inputs: ["side", "alignment"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoverContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-popover-content', template: `
+    <div
+      class="relative"
+      [attr.data-state]="animationState()"
+      [attr.data-side]="activeSide()"
+    >
+      @if (showArrow()) {
+        <com-popover-arrow [side]="activeSide()" [alignment]="activeAlignment()" />
+      }
+      <div
+        [class]="panelClasses()"
+        role="dialog"
+        [attr.id]="popoverId()"
+        [attr.aria-label]="ariaLabel() || null"
+      >
+        <ng-template [cdkPortalOutlet]="contentPortal()" />
+      </div>
+    </div>
+  `, imports: [CdkPortalOutlet, PopoverArrowComponent], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}[data-state=open]{animation:popover-in .15s ease-out}[data-state=closed]{animation:popover-out .1s ease-in forwards}[data-side=top]{transform-origin:bottom center}[data-side=bottom]{transform-origin:top center}[data-side=left]{transform-origin:right center}[data-side=right]{transform-origin:left center}@keyframes popover-in{0%{opacity:0;transform:scale(.96) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes popover-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){[data-state=open],[data-state=closed]{animation:none}}\n"] }]
+        }] });
+
+/**
+ * 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' }
+ * }
+ * ```
+ */
+const POPOVER_DATA = new InjectionToken('POPOVER_DATA');
+/**
+ * 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();
+ *   }
+ * }
+ * ```
+ */
+const POPOVER_REF = new InjectionToken('POPOVER_REF');
+
+/**
+ * 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
+ */
+function buildPopoverPositions(position, alignment, offset = 8) {
+    const allPositions = buildAllPositions(offset);
+    if (position === 'auto') {
+        // For auto, try below first, then above, then right, then left
+        return [
+            ...getPositionsForDirection('below', alignment, allPositions),
+            ...getPositionsForDirection('above', alignment, allPositions),
+            ...getPositionsForDirection('right', alignment, allPositions),
+            ...getPositionsForDirection('left', alignment, allPositions),
+        ];
+    }
+    // Start with preferred direction, then add fallbacks
+    const preferred = getPositionsForDirection(position, alignment, allPositions);
+    const fallbacks = ['below', 'above', 'left', 'right']
+        .filter((dir) => dir !== position)
+        .flatMap((dir) => getPositionsForDirection(dir, alignment, allPositions));
+    return [...preferred, ...fallbacks];
+}
+/**
+ * Build all 12 position combinations (4 directions × 3 alignments).
+ */
+function buildAllPositions(offset) {
+    const positions = new Map();
+    // Below positions
+    positions.set('below-start', {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetY: offset,
+    });
+    positions.set('below-center', {
+        originX: 'center',
+        originY: 'bottom',
+        overlayX: 'center',
+        overlayY: 'top',
+        offsetY: offset,
+    });
+    positions.set('below-end', {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetY: offset,
+    });
+    // Above positions
+    positions.set('above-start', {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        offsetY: -offset,
+    });
+    positions.set('above-center', {
+        originX: 'center',
+        originY: 'top',
+        overlayX: 'center',
+        overlayY: 'bottom',
+        offsetY: -offset,
+    });
+    positions.set('above-end', {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetY: -offset,
+    });
+    // Left positions
+    positions.set('left-start', {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetX: -offset,
+    });
+    positions.set('left-center', {
+        originX: 'start',
+        originY: 'center',
+        overlayX: 'end',
+        overlayY: 'center',
+        offsetX: -offset,
+    });
+    positions.set('left-end', {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetX: -offset,
+    });
+    // Right positions
+    positions.set('right-start', {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetX: offset,
+    });
+    positions.set('right-center', {
+        originX: 'end',
+        originY: 'center',
+        overlayX: 'start',
+        overlayY: 'center',
+        offsetX: offset,
+    });
+    positions.set('right-end', {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        offsetX: offset,
+    });
+    return positions;
+}
+/**
+ * Get positions for a specific direction, ordered by alignment preference.
+ */
+function getPositionsForDirection(direction, alignment, allPositions) {
+    if (direction === 'auto') {
+        return [];
+    }
+    // Order alignments with preferred first
+    const alignmentOrder = {
+        start: ['start', 'center', 'end'],
+        center: ['center', 'start', 'end'],
+        end: ['end', 'center', 'start'],
+    };
+    return alignmentOrder[alignment]
+        .map((align) => allPositions.get(`${direction}-${align}`))
+        .filter((pos) => pos !== undefined);
+}
+/**
+ * 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
+ */
+function deriveSideFromPosition(pair) {
+    const originX = pair.originX;
+    const originY = pair.originY;
+    const overlayX = pair.overlayX;
+    const overlayY = pair.overlayY;
+    if (originY === 'bottom' && overlayY === 'top')
+        return 'bottom';
+    if (originY === 'top' && overlayY === 'bottom')
+        return 'top';
+    if (originX === 'end' && overlayX === 'start')
+        return 'right';
+    if (originX === 'start' && overlayX === 'end')
+        return 'left';
+    return 'bottom';
+}
+/**
+ * Derive alignment from a connection pair.
+ */
+function deriveAlignmentFromPosition(pair) {
+    const originX = pair.originX;
+    const originY = pair.originY;
+    const overlayX = pair.overlayX;
+    const overlayY = pair.overlayY;
+    // For vertical positioning (above/below), check X alignment
+    if (originY === 'bottom' || originY === 'top') {
+        if (originX === 'start' && overlayX === 'start')
+            return 'start';
+        if (originX === 'end' && overlayX === 'end')
+            return 'end';
+        return 'center';
+    }
+    // For horizontal positioning (left/right), check Y alignment
+    if (originY === 'top' && overlayY === 'top')
+        return 'start';
+    if (originY === 'bottom' && overlayY === 'bottom')
+        return 'end';
+    return 'center';
+}
+
+/**
+ * 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>
+ * ```
+ */
+class PopoverTriggerDirective {
+    overlay = inject(Overlay);
+    elementRef = inject(ElementRef);
+    viewContainerRef = inject(ViewContainerRef);
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    focusTrapFactory = inject(FocusTrapFactory);
+    document = inject(DOCUMENT);
+    overlayRef = null;
+    focusTrap = null;
+    scrollCleanup = null;
+    popoverId = generatePopoverId();
+    // ─── Inputs ───
+    /** Content to render: TemplateRef or Component class. */
+    comPopoverTrigger = input.required(...(ngDevMode ? [{ debugName: "comPopoverTrigger" }] : []));
+    /** Preferred position direction. */
+    popoverPosition = input('auto', ...(ngDevMode ? [{ debugName: "popoverPosition" }] : []));
+    /** Alignment along the cross-axis. */
+    popoverAlignment = input('center', ...(ngDevMode ? [{ debugName: "popoverAlignment" }] : []));
+    /** What interaction opens the popover. */
+    popoverTriggerOn = input('click', ...(ngDevMode ? [{ debugName: "popoverTriggerOn" }] : []));
+    /** Gap in px between trigger and popover edge. */
+    popoverOffset = input(8, ...(ngDevMode ? [{ debugName: "popoverOffset" }] : []));
+    /** Whether to render the connecting arrow. */
+    popoverShowArrow = input(true, { ...(ngDevMode ? { debugName: "popoverShowArrow" } : {}), transform: booleanAttribute });
+    /** Size/padding preset for the content panel. */
+    popoverVariant = input('default', ...(ngDevMode ? [{ debugName: "popoverVariant" }] : []));
+    /** Backdrop behavior. */
+    popoverBackdrop = input('transparent', ...(ngDevMode ? [{ debugName: "popoverBackdrop" }] : []));
+    /** Close when clicking outside the popover. */
+    popoverCloseOnOutside = input(true, { ...(ngDevMode ? { debugName: "popoverCloseOnOutside" } : {}), transform: booleanAttribute });
+    /** Close on Escape key. */
+    popoverCloseOnEscape = input(true, { ...(ngDevMode ? { debugName: "popoverCloseOnEscape" } : {}), transform: booleanAttribute });
+    /** Close when ancestor scrollable container scrolls. */
+    popoverCloseOnScroll = input(false, { ...(ngDevMode ? { debugName: "popoverCloseOnScroll" } : {}), transform: booleanAttribute });
+    /** Prevents opening when true. */
+    popoverDisabled = input(false, { ...(ngDevMode ? { debugName: "popoverDisabled" } : {}), transform: booleanAttribute });
+    /** Two-way bindable open state. */
+    popoverOpen = model(false, ...(ngDevMode ? [{ debugName: "popoverOpen" }] : []));
+    /** Arbitrary data passed to the content component/template. */
+    popoverData = input(undefined, ...(ngDevMode ? [{ debugName: "popoverData" }] : []));
+    /** Custom CSS class(es) on the overlay panel. */
+    popoverPanelClass = input('', ...(ngDevMode ? [{ debugName: "popoverPanelClass" }] : []));
+    /** Trap focus inside popover. */
+    popoverTrapFocus = input(false, { ...(ngDevMode ? { debugName: "popoverTrapFocus" } : {}), transform: booleanAttribute });
+    /** Optional accessibility label for the popover dialog. */
+    popoverAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "popoverAriaLabel" }] : []));
+    // ─── Outputs ───
+    /** Emitted after popup opens and is visible. */
+    popoverOpened = output();
+    /** Emitted after popup closes and is detached. */
+    popoverClosed = output();
+    // ─── Internal State ───
+    activeSide = signal('top', ...(ngDevMode ? [{ debugName: "activeSide" }] : []));
+    activeAlignment = signal('center', ...(ngDevMode ? [{ debugName: "activeAlignment" }] : []));
+    animationState = signal('open', ...(ngDevMode ? [{ debugName: "animationState" }] : []));
+    contentComponentRef = null;
+    // ─── Computed ───
+    hasBackdrop = computed(() => this.popoverBackdrop() !== 'none', ...(ngDevMode ? [{ debugName: "hasBackdrop" }] : []));
+    backdropClass = computed(() => this.popoverBackdrop() === 'dimmed' ? 'cdk-overlay-dark-backdrop' : 'cdk-overlay-transparent-backdrop', ...(ngDevMode ? [{ debugName: "backdropClass" }] : []));
+    ariaControls = computed(() => this.popoverOpen() ? this.popoverId : null, ...(ngDevMode ? [{ debugName: "ariaControls" }] : []));
+    panelClassArray = computed(() => {
+        const panelClass = this.popoverPanelClass();
+        if (Array.isArray(panelClass))
+            return panelClass;
+        return panelClass ? [panelClass] : [];
+    }, ...(ngDevMode ? [{ debugName: "panelClassArray" }] : []));
+    constructor() {
+        // React to external open state changes
+        effect(() => {
+            const isOpen = this.popoverOpen();
+            if (isOpen && !this.overlayRef?.hasAttached()) {
+                this.openPopover();
+            }
+            else if (!isOpen && this.overlayRef?.hasAttached()) {
+                this.closePopover();
+            }
+        });
+        // Cleanup on destroy
+        this.destroyRef.onDestroy(() => {
+            this.disposeOverlay();
+        });
+    }
+    // ─── Public API ───
+    /** Programmatically open the popover. */
+    open() {
+        if (!this.popoverDisabled() && !this.overlayRef?.hasAttached()) {
+            this.popoverOpen.set(true);
+        }
+    }
+    /** Programmatically close the popover. */
+    close() {
+        if (this.overlayRef?.hasAttached()) {
+            this.popoverOpen.set(false);
+        }
+    }
+    /** Toggle the popover open/close state. */
+    toggle() {
+        this.popoverOpen() ? this.close() : this.open();
+    }
+    /** Force recalculation of position. */
+    reposition() {
+        if (this.overlayRef) {
+            this.overlayRef.updatePosition();
+        }
+    }
+    // ─── Event Handlers ───
+    onTriggerClick(event) {
+        if (this.popoverTriggerOn() === 'click') {
+            event.preventDefault();
+            this.toggle();
+        }
+    }
+    onTriggerFocus() {
+        if (this.popoverTriggerOn() === 'focus') {
+            this.open();
+        }
+    }
+    onTriggerBlur() {
+        if (this.popoverTriggerOn() === 'focus') {
+            // Delay to allow focus to move to popover content
+            setTimeout(() => {
+                if (!this.overlayRef?.overlayElement.contains(this.document.activeElement)) {
+                    this.close();
+                }
+            }, 0);
+        }
+    }
+    onEscapeKey(event) {
+        if (this.popoverCloseOnEscape() && this.popoverOpen()) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.close();
+            this.elementRef.nativeElement.focus();
+        }
+    }
+    // ─── Private Methods ───
+    openPopover() {
+        if (this.popoverDisabled())
+            return;
+        this.createOverlay();
+        this.attachContent();
+        this.subscribeToCloseEvents();
+        this.subscribeToScrollEvents();
+        this.setupFocusTrap();
+        this.animationState.set('open');
+        this.popoverOpened.emit();
+    }
+    closePopover() {
+        this.animationState.set('closed');
+        this.unsubscribeFromScrollEvents();
+        // Wait for animation to complete before detaching
+        setTimeout(() => {
+            this.detachContent();
+            this.destroyFocusTrap();
+            this.popoverClosed.emit();
+        }, 100); // Match animation duration
+    }
+    subscribeToScrollEvents() {
+        if (this.popoverCloseOnScroll())
+            return;
+        const scrollHandler = () => this.overlayRef?.updatePosition();
+        this.document.addEventListener('scroll', scrollHandler, true);
+        this.scrollCleanup = () => this.document.removeEventListener('scroll', scrollHandler, true);
+    }
+    unsubscribeFromScrollEvents() {
+        this.scrollCleanup?.();
+        this.scrollCleanup = null;
+    }
+    createOverlay() {
+        if (this.overlayRef)
+            return;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.elementRef)
+            .withPositions(buildPopoverPositions(this.popoverPosition(), this.popoverAlignment(), this.popoverOffset()))
+            .withFlexibleDimensions(false)
+            .withPush(true)
+            .withViewportMargin(8);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.popoverCloseOnScroll()
+                ? this.overlay.scrollStrategies.close()
+                : this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: this.hasBackdrop(),
+            backdropClass: this.backdropClass(),
+            panelClass: ['com-popover-panel', ...this.panelClassArray()],
+        });
+        // Track position changes for arrow placement
+        positionStrategy.positionChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((change) => {
+            this.activeSide.set(deriveSideFromPosition(change.connectionPair));
+            this.activeAlignment.set(deriveAlignmentFromPosition(change.connectionPair));
+            this.updateContentComponentInputs();
+        });
+    }
+    attachContent() {
+        if (!this.overlayRef)
+            return;
+        const content = this.comPopoverTrigger();
+        // Create the content wrapper component
+        const contentInjector = Injector.create({
+            parent: this.injector,
+            providers: [
+                { provide: POPOVER_DATA, useValue: this.popoverData() },
+                { provide: POPOVER_REF, useValue: this },
+            ],
+        });
+        const contentPortal = new ComponentPortal(PopoverContentComponent, this.viewContainerRef, contentInjector);
+        const contentRef = this.overlayRef.attach(contentPortal);
+        this.contentComponentRef = contentRef.instance;
+        // Create the inner content portal (template or component)
+        let innerPortal;
+        if (content instanceof TemplateRef) {
+            innerPortal = new TemplatePortal(content, this.viewContainerRef, {
+                $implicit: this.popoverData(),
+                close: () => this.close(),
+            });
+        }
+        else {
+            const componentInjector = Injector.create({
+                parent: this.injector,
+                providers: [
+                    { provide: POPOVER_DATA, useValue: this.popoverData() },
+                    { provide: POPOVER_REF, useValue: this },
+                ],
+            });
+            innerPortal = new ComponentPortal(content, this.viewContainerRef, componentInjector);
+        }
+        // Set content component inputs
+        this.updateContentComponentInputs(innerPortal);
+    }
+    updateContentComponentInputs(innerPortal) {
+        const ref = this.contentComponentRef;
+        if (!ref)
+            return;
+        if (innerPortal) {
+            ref.contentPortal.set(innerPortal);
+        }
+        ref.variant.set(this.popoverVariant());
+        ref.showArrow.set(this.popoverShowArrow());
+        ref.activeSide.set(this.activeSide());
+        ref.activeAlignment.set(this.activeAlignment());
+        ref.popoverId.set(this.popoverId);
+        ref.ariaLabel.set(this.popoverAriaLabel());
+        ref.animationState.set(this.animationState());
+        ref.panelClass.set(mergeClasses(...this.panelClassArray()));
+    }
+    detachContent() {
+        if (this.overlayRef?.hasAttached()) {
+            this.overlayRef.detach();
+        }
+        this.contentComponentRef = null;
+    }
+    subscribeToCloseEvents() {
+        if (!this.overlayRef)
+            return;
+        // Close on backdrop click
+        if (this.popoverCloseOnOutside()) {
+            this.overlayRef
+                .backdropClick()
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this.close());
+        }
+        // Close on escape key (handled by overlay)
+        if (this.popoverCloseOnEscape()) {
+            this.overlayRef
+                .keydownEvents()
+                .pipe(filter((event) => event.key === 'Escape'), takeUntilDestroyed(this.destroyRef))
+                .subscribe((event) => {
+                event.preventDefault();
+                this.close();
+                this.elementRef.nativeElement.focus();
+            });
+        }
+        // Handle detachment
+        this.overlayRef
+            .detachments()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.popoverOpen.set(false);
+        });
+    }
+    setupFocusTrap() {
+        if (this.popoverTrapFocus() && this.overlayRef) {
+            this.focusTrap = this.focusTrapFactory.create(this.overlayRef.overlayElement);
+            this.focusTrap.focusInitialElementWhenReady();
+        }
+    }
+    destroyFocusTrap() {
+        if (this.focusTrap) {
+            this.focusTrap.destroy();
+            this.focusTrap = null;
+        }
+    }
+    disposeOverlay() {
+        this.destroyFocusTrap();
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+        this.contentComponentRef = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: PopoverTriggerDirective, isStandalone: true, selector: "[comPopoverTrigger]", inputs: { comPopoverTrigger: { classPropertyName: "comPopoverTrigger", publicName: "comPopoverTrigger", isSignal: true, isRequired: true, transformFunction: null }, popoverPosition: { classPropertyName: "popoverPosition", publicName: "popoverPosition", isSignal: true, isRequired: false, transformFunction: null }, popoverAlignment: { classPropertyName: "popoverAlignment", publicName: "popoverAlignment", isSignal: true, isRequired: false, transformFunction: null }, popoverTriggerOn: { classPropertyName: "popoverTriggerOn", publicName: "popoverTriggerOn", isSignal: true, isRequired: false, transformFunction: null }, popoverOffset: { classPropertyName: "popoverOffset", publicName: "popoverOffset", isSignal: true, isRequired: false, transformFunction: null }, popoverShowArrow: { classPropertyName: "popoverShowArrow", publicName: "popoverShowArrow", isSignal: true, isRequired: false, transformFunction: null }, popoverVariant: { classPropertyName: "popoverVariant", publicName: "popoverVariant", isSignal: true, isRequired: false, transformFunction: null }, popoverBackdrop: { classPropertyName: "popoverBackdrop", publicName: "popoverBackdrop", isSignal: true, isRequired: false, transformFunction: null }, popoverCloseOnOutside: { classPropertyName: "popoverCloseOnOutside", publicName: "popoverCloseOnOutside", isSignal: true, isRequired: false, transformFunction: null }, popoverCloseOnEscape: { classPropertyName: "popoverCloseOnEscape", publicName: "popoverCloseOnEscape", isSignal: true, isRequired: false, transformFunction: null }, popoverCloseOnScroll: { classPropertyName: "popoverCloseOnScroll", publicName: "popoverCloseOnScroll", isSignal: true, isRequired: false, transformFunction: null }, popoverDisabled: { classPropertyName: "popoverDisabled", publicName: "popoverDisabled", isSignal: true, isRequired: false, transformFunction: null }, popoverOpen: { classPropertyName: "popoverOpen", publicName: "popoverOpen", isSignal: true, isRequired: false, transformFunction: null }, popoverData: { classPropertyName: "popoverData", publicName: "popoverData", isSignal: true, isRequired: false, transformFunction: null }, popoverPanelClass: { classPropertyName: "popoverPanelClass", publicName: "popoverPanelClass", isSignal: true, isRequired: false, transformFunction: null }, popoverTrapFocus: { classPropertyName: "popoverTrapFocus", publicName: "popoverTrapFocus", isSignal: true, isRequired: false, transformFunction: null }, popoverAriaLabel: { classPropertyName: "popoverAriaLabel", publicName: "popoverAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { popoverOpen: "popoverOpenChange", popoverOpened: "popoverOpened", popoverClosed: "popoverClosed" }, host: { listeners: { "click": "onTriggerClick($event)", "focus": "onTriggerFocus()", "blur": "onTriggerBlur()", "keydown.escape": "onEscapeKey($event)" }, properties: { "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "popoverOpen()", "attr.aria-controls": "ariaControls()" } }, exportAs: ["comPopoverTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoverTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comPopoverTrigger]',
+                    exportAs: 'comPopoverTrigger',
+                    host: {
+                        '[attr.aria-haspopup]': '"dialog"',
+                        '[attr.aria-expanded]': 'popoverOpen()',
+                        '[attr.aria-controls]': 'ariaControls()',
+                        '(click)': 'onTriggerClick($event)',
+                        '(focus)': 'onTriggerFocus()',
+                        '(blur)': 'onTriggerBlur()',
+                        '(keydown.escape)': 'onEscapeKey($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { comPopoverTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "comPopoverTrigger", required: true }] }], popoverPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverPosition", required: false }] }], popoverAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverAlignment", required: false }] }], popoverTriggerOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverTriggerOn", required: false }] }], popoverOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverOffset", required: false }] }], popoverShowArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverShowArrow", required: false }] }], popoverVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverVariant", required: false }] }], popoverBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverBackdrop", required: false }] }], popoverCloseOnOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverCloseOnOutside", required: false }] }], popoverCloseOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverCloseOnEscape", required: false }] }], popoverCloseOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverCloseOnScroll", required: false }] }], popoverDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverDisabled", required: false }] }], popoverOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverOpen", required: false }] }, { type: i0.Output, args: ["popoverOpenChange"] }], popoverData: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverData", required: false }] }], popoverPanelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverPanelClass", required: false }] }], popoverTrapFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverTrapFocus", required: false }] }], popoverAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverAriaLabel", required: false }] }], popoverOpened: [{ type: i0.Output, args: ["popoverOpened"] }], popoverClosed: [{ type: i0.Output, args: ["popoverClosed"] }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class PopoverCloseDirective {
+    popoverRef = inject(POPOVER_REF, { optional: true });
+    /**
+     * Optional result value to pass when closing.
+     * This value is emitted via the trigger's close event.
+     */
+    comPopoverClose = input(undefined, ...(ngDevMode ? [{ debugName: "comPopoverClose" }] : []));
+    closePopover() {
+        this.popoverRef?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoverCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: PopoverCloseDirective, isStandalone: true, selector: "[comPopoverClose]", inputs: { comPopoverClose: { classPropertyName: "comPopoverClose", publicName: "comPopoverClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "closePopover()" }, properties: { "attr.type": "\"button\"" } }, exportAs: ["comPopoverClose"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoverCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comPopoverClose]',
+                    exportAs: 'comPopoverClose',
+                    host: {
+                        '(click)': 'closePopover()',
+                        '[attr.type]': '"button"',
+                    },
+                }]
+        }], propDecorators: { comPopoverClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "comPopoverClose", required: false }] }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class PopoverTemplateDirective {
+    /** Reference to the template for rendering. */
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoverTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: PopoverTemplateDirective, isStandalone: true, selector: "[comPopoverTemplate]", exportAs: ["comPopoverTemplate"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoverTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comPopoverTemplate]',
+                    exportAs: 'comPopoverTemplate',
+                }]
+        }] });
+
+// Public API for the popover component
+// Main directive
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { POPOVER_DATA, POPOVER_REF, PopoverCloseDirective, PopoverTemplateDirective, PopoverTriggerDirective, buildPopoverPositions, deriveAlignmentFromPosition, deriveSideFromPosition, popoverArrowVariants, popoverPanelVariants };
+//# sourceMappingURL=ngx-com-components-popover.mjs.map