@cdevhub/ngx-tw 0.2.0

package/fesm2022/cdevhub-ngx-tw-popover.mjs

@@ -0,0 +1,678 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, signal, computed, ChangeDetectionStrategy, Component, input, model, output, inject, ElementRef, ViewContainerRef, Injector, DestroyRef, effect, untracked, TemplateRef, Directive } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
+import { FocusTrapFactory, _IdGenerator } from '@angular/cdk/a11y';
+import { Subscription } from 'rxjs';
+import { tv } from 'tailwind-variants';
+
+/** Injection token providing arbitrary data to popover component content. */
+const POPOVER_DATA = new InjectionToken('POPOVER_DATA');
+/** Injection token providing a `PopoverRef` to popover component content. */
+const POPOVER_REF = new InjectionToken('POPOVER_REF');
+
+/** Duration of leave animation in ms (must match _base.css scale-out/fade-out). */
+const ANIMATION_DURATION = 120;
+// ── Variant config ──
+const popoverVariants = tv({
+    slots: {
+        wrapper: 'relative',
+        panel: 'bg-surface-overlay text-fg text-sm border border-border rounded-lg shadow-md overflow-hidden',
+        arrow: 'absolute size-2.5 rotate-45 bg-surface-overlay border border-border',
+    },
+    variants: {
+        size: {
+            xs: { panel: 'p-2' },
+            sm: { panel: 'p-3' },
+            md: { panel: 'p-4' },
+            lg: { panel: 'p-6' },
+            xl: { panel: 'p-8' },
+        },
+    },
+    defaultVariants: { size: 'md' },
+}, { twMerge: true });
+// ── Color accent classes ──
+const COLOR_ACCENT_CLASSES = {
+    primary: 'border-t-2 border-t-primary-500',
+    secondary: 'border-t-2 border-t-secondary-500',
+    accent: 'border-t-2 border-t-accent-500',
+    neutral: 'border-t-2 border-t-neutral-500',
+    info: 'border-t-2 border-t-info-500',
+    success: 'border-t-2 border-t-success-500',
+    warning: 'border-t-2 border-t-warning-500',
+    error: 'border-t-2 border-t-error-500',
+};
+// ── Position mappings ──
+function buildPositionMap(offset) {
+    return {
+        top: {
+            originX: 'center',
+            originY: 'top',
+            overlayX: 'center',
+            overlayY: 'bottom',
+            offsetY: -offset,
+        },
+        'top-start': {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetY: -offset,
+        },
+        'top-end': {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'bottom',
+            offsetY: -offset,
+        },
+        bottom: {
+            originX: 'center',
+            originY: 'bottom',
+            overlayX: 'center',
+            overlayY: 'top',
+            offsetY: offset,
+        },
+        'bottom-start': {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetY: offset,
+        },
+        'bottom-end': {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top',
+            offsetY: offset,
+        },
+        left: {
+            originX: 'start',
+            originY: 'center',
+            overlayX: 'end',
+            overlayY: 'center',
+            offsetX: -offset,
+        },
+        'left-start': {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'top',
+            offsetX: -offset,
+        },
+        'left-end': {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'bottom',
+            offsetX: -offset,
+        },
+        right: {
+            originX: 'end',
+            originY: 'center',
+            overlayX: 'start',
+            overlayY: 'center',
+            offsetX: offset,
+        },
+        'right-start': {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetX: offset,
+        },
+        'right-end': {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetX: offset,
+        },
+    };
+}
+const FALLBACK_ORDER = {
+    top: ['bottom', 'left', 'right'],
+    bottom: ['top', 'left', 'right'],
+    left: ['right', 'top', 'bottom'],
+    right: ['left', 'top', 'bottom'],
+};
+function buildPositions(preferred, offset) {
+    const positionMap = buildPositionMap(offset);
+    const primary = preferred.split('-')[0];
+    const positions = [positionMap[preferred]];
+    const fallbacks = FALLBACK_ORDER[primary] ?? FALLBACK_ORDER['top'];
+    for (const fb of fallbacks) {
+        positions.push(positionMap[fb]);
+    }
+    return positions;
+}
+function resolveArrowDirection(position) {
+    if (position.overlayY === 'bottom')
+        return 'bottom';
+    if (position.overlayY === 'top')
+        return 'top';
+    if (position.overlayX === 'end')
+        return 'right';
+    return 'left';
+}
+/** Arrow position classes keyed by which side the arrow sits on. */
+const ARROW_POSITION_CLASSES = {
+    bottom: 'left-1/2 -translate-x-1/2 bottom-0 translate-y-1/2 border-t-0 border-l-0',
+    top: 'left-1/2 -translate-x-1/2 top-0 -translate-y-1/2 border-b-0 border-r-0',
+    right: 'top-1/2 -translate-y-1/2 right-0 translate-x-1/2 border-b-0 border-l-0',
+    left: 'top-1/2 -translate-y-1/2 left-0 -translate-x-1/2 border-t-0 border-r-0',
+};
+// ── Internal overlay component (not exported) ──
+let nextPopoverId = 0;
+class PopoverOverlayComponent {
+    id = `tw-popover-${nextPopoverId++}`;
+    size = signal('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    color = signal(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    showArrow = signal(true, ...(ngDevMode ? [{ debugName: "showArrow" }] : /* istanbul ignore next */ []));
+    arrowDirection = signal('top', ...(ngDevMode ? [{ debugName: "arrowDirection" }] : /* istanbul ignore next */ []));
+    ariaLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaModal = signal(true, ...(ngDevMode ? [{ debugName: "ariaModal" }] : /* istanbul ignore next */ []));
+    ariaLabelledByQueue = signal([], ...(ngDevMode ? [{ debugName: "ariaLabelledByQueue" }] : /* istanbul ignore next */ []));
+    panelClass = signal('', ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    portal = signal(null, ...(ngDevMode ? [{ debugName: "portal" }] : /* istanbul ignore next */ []));
+    computedAriaLabelledBy = computed(() => {
+        if (this.ariaLabel())
+            return null;
+        return this.ariaLabelledByQueue()[0] ?? null;
+    }, ...(ngDevMode ? [{ debugName: "computedAriaLabelledBy" }] : /* istanbul ignore next */ []));
+    _addAriaLabelledBy(id) {
+        this.ariaLabelledByQueue.update((q) => (q.includes(id) ? q : [...q, id]));
+    }
+    _removeAriaLabelledBy(id) {
+        this.ariaLabelledByQueue.update((q) => q.filter((existing) => existing !== id));
+    }
+    variantResult = computed(() => popoverVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    wrapperClasses = computed(() => this.variantResult().wrapper(), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
+    panelClasses = computed(() => {
+        const base = this.variantResult().panel();
+        const colorClass = this.color() ? COLOR_ACCENT_CLASSES[this.color()] : '';
+        const custom = this.panelClass();
+        return [base, colorClass, custom].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
+    arrowClasses = computed(() => {
+        const base = this.variantResult().arrow();
+        const position = ARROW_POSITION_CLASSES[this.arrowDirection()];
+        return `${base} ${position}`;
+    }, ...(ngDevMode ? [{ debugName: "arrowClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PopoverOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PopoverOverlayComponent, isStandalone: true, selector: "tw-popover-overlay", host: { properties: { "id": "id", "attr.role": "\"dialog\"", "attr.aria-modal": "ariaModal() ? \"true\" : null", "attr.aria-label": "ariaLabel() ?? null", "attr.aria-labelledby": "computedAriaLabelledBy()", "animate.enter": "\"scale-in\"", "animate.leave": "\"scale-out\"" }, classAttribute: "origin-center" }, ngImport: i0, template: `
+    <div [class]="wrapperClasses()">
+      <div [class]="panelClasses()">
+        <ng-template [cdkPortalOutlet]="portal()" />
+      </div>
+      @if (showArrow()) {
+        <span [class]="arrowClasses()" aria-hidden="true"></span>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PopoverOverlayComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-popover-overlay',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CdkPortalOutlet],
+                    host: {
+                        class: 'origin-center',
+                        '[id]': 'id',
+                        '[attr.role]': '"dialog"',
+                        '[attr.aria-modal]': 'ariaModal() ? "true" : null',
+                        '[attr.aria-label]': 'ariaLabel() ?? null',
+                        '[attr.aria-labelledby]': 'computedAriaLabelledBy()',
+                        '[animate.enter]': '"scale-in"',
+                        '[animate.leave]': '"scale-out"',
+                    },
+                    template: `
+    <div [class]="wrapperClasses()">
+      <div [class]="panelClasses()">
+        <ng-template [cdkPortalOutlet]="portal()" />
+      </div>
+      @if (showArrow()) {
+        <span [class]="arrowClasses()" aria-hidden="true"></span>
+      }
+    </div>
+  `,
+                }]
+        }] });
+// ── Popover directive ──
+class PopoverDirective {
+    /** The content to render. An `ng-template` receives context with `$implicit` (data) and `close` (function). A component class receives data and a ref via injection tokens. */
+    twPopover = input.required(...(ngDevMode ? [{ debugName: "twPopover" }] : /* istanbul ignore next */ []));
+    /** Preferred placement relative to the trigger. CDK handles fallback when space is insufficient. Defaults to `'bottom'`. */
+    twPopoverPosition = input('bottom', ...(ngDevMode ? [{ debugName: "twPopoverPosition" }] : /* istanbul ignore next */ []));
+    /** What user interaction opens the popover. `'manual'` means consumers call `open()`/`close()` programmatically. Defaults to `'click'`. */
+    twPopoverTriggerOn = input('click', ...(ngDevMode ? [{ debugName: "twPopoverTriggerOn" }] : /* istanbul ignore next */ []));
+    /** When true, all trigger interactions are suppressed. Defaults to `false`. */
+    twPopoverDisabled = input(false, ...(ngDevMode ? [{ debugName: "twPopoverDisabled" }] : /* istanbul ignore next */ []));
+    /** Two-way bindable open state. Setting to `true` opens the popover; the popover sets it to `false` on close. */
+    twPopoverOpen = model(false, ...(ngDevMode ? [{ debugName: "twPopoverOpen" }] : /* istanbul ignore next */ []));
+    /** Controls panel padding using the standard spacing scale. Defaults to `'md'`. */
+    twPopoverSize = input('md', ...(ngDevMode ? [{ debugName: "twPopoverSize" }] : /* istanbul ignore next */ []));
+    /** Pixel distance between trigger and panel edge. Defaults to `8`. */
+    twPopoverOffset = input(8, ...(ngDevMode ? [{ debugName: "twPopoverOffset" }] : /* istanbul ignore next */ []));
+    // Default true: the panel reads as a floating callout without the arrow; opt-out
+    // is intended for compact iconic triggers where the arrow would crowd the layout.
+    /** Whether to render a directional arrow pointing at the trigger. Defaults to `true`. */
+    twPopoverArrow = input(true, ...(ngDevMode ? [{ debugName: "twPopoverArrow" }] : /* istanbul ignore next */ []));
+    /** Backdrop behavior. `'transparent'` catches outside clicks invisibly. `'dimmed'` adds a semi-transparent overlay. `'none'` disables the backdrop. Defaults to `'transparent'`. */
+    twPopoverBackdrop = input('transparent', ...(ngDevMode ? [{ debugName: "twPopoverBackdrop" }] : /* istanbul ignore next */ []));
+    // Default true: clicking away is the universal dismiss gesture for floating panels;
+    // opt-out is for popovers that own multi-step flows the user must complete.
+    /** Whether clicking outside the panel closes the popover. Only relevant when backdrop is `'none'`. Defaults to `true`. */
+    twPopoverCloseOnOutside = input(true, ...(ngDevMode ? [{ debugName: "twPopoverCloseOnOutside" }] : /* istanbul ignore next */ []));
+    // Default true: WAI-ARIA dialog pattern mandates Escape closes; opt-out is for
+    // popovers that own a child layer (nested dialog/menu) that should consume Escape first.
+    /** Whether pressing Escape closes the popover. Defaults to `true`. */
+    twPopoverCloseOnEscape = input(true, ...(ngDevMode ? [{ debugName: "twPopoverCloseOnEscape" }] : /* istanbul ignore next */ []));
+    /** CDK scroll strategy for the overlay. Defaults to `'reposition'`. */
+    twPopoverScrollStrategy = input('reposition', ...(ngDevMode ? [{ debugName: "twPopoverScrollStrategy" }] : /* istanbul ignore next */ []));
+    // Default true: matches the role="dialog" baseline — a focus-trapped panel announces
+    // itself as modal-ish; opt-out for inline popovers acting as informational tooltips.
+    /** Whether to trap focus inside the popover panel using CDK FocusTrapFactory. Defaults to `true`. */
+    twPopoverTrapFocus = input(true, ...(ngDevMode ? [{ debugName: "twPopoverTrapFocus" }] : /* istanbul ignore next */ []));
+    /** Arbitrary data passed to template context or component via `POPOVER_DATA` token. */
+    twPopoverData = input(undefined, ...(ngDevMode ? [{ debugName: "twPopoverData" }] : /* istanbul ignore next */ []));
+    /** Additional CSS classes applied to the overlay panel for consumer customization. */
+    twPopoverPanelClass = input('', ...(ngDevMode ? [{ debugName: "twPopoverPanelClass" }] : /* istanbul ignore next */ []));
+    /** Optional semantic color. When set, adds a colored top border accent to the panel. */
+    twPopoverColor = input(undefined, ...(ngDevMode ? [{ debugName: "twPopoverColor" }] : /* istanbul ignore next */ []));
+    /** Explicit `aria-label` for the dialog panel. */
+    twPopoverAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "twPopoverAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Fires after the popover becomes visible. */
+    twPopoverOpened = output();
+    /** Fires after the popover is fully removed. */
+    twPopoverClosed = output();
+    overlay = inject(Overlay);
+    elementRef = inject((ElementRef));
+    viewContainerRef = inject(ViewContainerRef);
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    focusTrapFactory = inject(FocusTrapFactory);
+    overlayRef = null;
+    popoverInstance = null;
+    focusTrap = null;
+    perOpenSubs = null;
+    closing = false;
+    closeTimer = null;
+    /** Tracked focus-blur close timer; cleared on destroy so it can't fire post-teardown. */
+    blurCloseTimer = null;
+    overlayId = signal(null, ...(ngDevMode ? [{ debugName: "overlayId" }] : /* istanbul ignore next */ []));
+    /** The overlay component's id for aria-controls binding. */
+    overlayComponentId = computed(() => this.overlayId(), ...(ngDevMode ? [{ debugName: "overlayComponentId" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // React to model changes from the parent
+        effect(() => {
+            const isOpen = this.twPopoverOpen();
+            const disabled = this.twPopoverDisabled();
+            if (disabled && this.popoverInstance) {
+                this.closePopover();
+                return;
+            }
+            if (isOpen && !this.popoverInstance && !disabled && !this.closing) {
+                this.openPopover();
+            }
+            else if (!isOpen && this.popoverInstance) {
+                this.closePopover();
+            }
+        });
+        this.destroyRef.onDestroy(() => {
+            this.clearCloseTimer();
+            if (this.blurCloseTimer !== null) {
+                clearTimeout(this.blurCloseTimer);
+                this.blurCloseTimer = null;
+            }
+            this.destroyFocusTrap();
+            this.perOpenSubs?.unsubscribe();
+            this.disposeOverlay();
+        });
+    }
+    /** Programmatically open the popover. */
+    open() {
+        if (this.twPopoverDisabled() || this.popoverInstance || this.closing)
+            return;
+        this.twPopoverOpen.set(true);
+    }
+    /** Programmatically close the popover. */
+    close() {
+        if (!this.popoverInstance && !this.closing)
+            return;
+        this.twPopoverOpen.set(false);
+    }
+    /** Toggle open/close. */
+    toggle() {
+        if (this.popoverInstance || this.closing) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    /** Force CDK to recalculate overlay position. */
+    reposition() {
+        this.overlayRef?.updatePosition();
+    }
+    // ── Host event handlers ──
+    onHostClick() {
+        if (this.twPopoverTriggerOn() === 'click') {
+            this.toggle();
+        }
+    }
+    onHostFocus() {
+        if (this.twPopoverTriggerOn() === 'focus') {
+            this.open();
+        }
+    }
+    onHostBlur() {
+        if (this.twPopoverTriggerOn() === 'focus') {
+            if (this.blurCloseTimer !== null)
+                clearTimeout(this.blurCloseTimer);
+            this.blurCloseTimer = setTimeout(() => {
+                this.blurCloseTimer = null;
+                const activeEl = document.activeElement;
+                const overlayEl = this.overlayRef?.overlayElement;
+                if (overlayEl && overlayEl.contains(activeEl))
+                    return;
+                this.close();
+            });
+        }
+    }
+    onEscape() {
+        if (this.twPopoverCloseOnEscape() && this.popoverInstance) {
+            this.close();
+        }
+    }
+    // ── Private ──
+    openPopover() {
+        this.ensureOverlay();
+        this.updatePositionStrategy();
+        this.attachContent();
+        this.subscribePerOpen();
+        this.overlayId.set(this.popoverInstance?.id ?? null);
+        this.setupFocusTrap();
+        this.twPopoverOpened.emit();
+    }
+    closePopover() {
+        if (this.closing)
+            return;
+        this.closing = true;
+        // Restore focus to the trigger UNLESS the consumer has deliberately moved
+        // focus to a different focusable element outside the overlay. We detect
+        // that by checking whether the active element is a real focusable target
+        // outside the overlay — body/null means focus is "unset" and we should
+        // still restore (the typical case after Escape or backdrop click).
+        const overlayEl = this.overlayRef?.overlayElement;
+        const activeEl = document.activeElement;
+        const focusOutsideOverlayIntentionally = !!activeEl &&
+            activeEl !== document.body &&
+            activeEl !== this.elementRef.nativeElement &&
+            !overlayEl?.contains(activeEl);
+        // 1. Destroy focus trap so focus can leave
+        this.destroyFocusTrap();
+        // 2. Return focus to trigger only when appropriate
+        if (!focusOutsideOverlayIntentionally) {
+            this.elementRef.nativeElement.focus();
+        }
+        // 3. Wait for leave animation, then detach
+        this.closeTimer = setTimeout(() => {
+            this.closeTimer = null;
+            if (this.overlayRef?.hasAttached()) {
+                this.overlayRef.detach();
+            }
+            this.perOpenSubs?.unsubscribe();
+            this.perOpenSubs = null;
+            this.popoverInstance = null;
+            this.overlayId.set(null);
+            // Use untracked to prevent effect re-trigger
+            untracked(() => this.twPopoverOpen.set(false));
+            this.twPopoverClosed.emit();
+            this.closing = false;
+        }, ANIMATION_DURATION);
+    }
+    currentPositionStrategy = null;
+    buildPositionStrategy() {
+        const positions = buildPositions(this.twPopoverPosition(), this.twPopoverOffset());
+        return this.overlay
+            .position()
+            .flexibleConnectedTo(this.elementRef)
+            .withPositions(positions)
+            .withFlexibleDimensions(false)
+            .withPush(true)
+            .withViewportMargin(8);
+    }
+    ensureOverlay() {
+        if (this.overlayRef)
+            return;
+        const positionStrategy = this.buildPositionStrategy();
+        this.currentPositionStrategy = positionStrategy;
+        const backdrop = this.twPopoverBackdrop();
+        const hasBackdrop = backdrop !== 'none';
+        const backdropClass = backdrop === 'dimmed' ? 'bg-black/20' : 'cdk-overlay-transparent-backdrop';
+        const scrollStrategy = this.resolveScrollStrategy();
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy,
+            hasBackdrop,
+            backdropClass,
+            panelClass: 'tw-popover-panel',
+        });
+    }
+    updatePositionStrategy() {
+        if (!this.overlayRef)
+            return;
+        const positionStrategy = this.buildPositionStrategy();
+        this.currentPositionStrategy = positionStrategy;
+        this.overlayRef.updatePositionStrategy(positionStrategy);
+    }
+    subscribePerOpen() {
+        this.perOpenSubs?.unsubscribe();
+        this.perOpenSubs = new Subscription();
+        const backdrop = this.twPopoverBackdrop();
+        const hasBackdrop = backdrop !== 'none';
+        // Backdrop click closes
+        if (hasBackdrop) {
+            this.perOpenSubs.add(this.overlayRef.backdropClick().subscribe(() => this.close()));
+        }
+        // Outside pointer events when no backdrop
+        if (!hasBackdrop && this.twPopoverCloseOnOutside()) {
+            this.perOpenSubs.add(this.overlayRef.outsidePointerEvents().subscribe(() => this.close()));
+        }
+        // Escape from within the overlay
+        this.perOpenSubs.add(this.overlayRef.keydownEvents().subscribe((event) => {
+            if (event.key === 'Escape' && this.twPopoverCloseOnEscape()) {
+                this.close();
+            }
+        }));
+        // Per-open position change subscription — torn down on close to prevent
+        // accumulation when the directive is opened/closed many times.
+        if (this.currentPositionStrategy) {
+            this.perOpenSubs.add(this.currentPositionStrategy.positionChanges.subscribe((change) => {
+                if (this.popoverInstance) {
+                    const dir = resolveArrowDirection(change.connectionPair);
+                    this.popoverInstance.arrowDirection.set(dir);
+                }
+            }));
+        }
+    }
+    attachContent() {
+        const content = this.twPopover();
+        // Attach the internal overlay component
+        const overlayPortal = new ComponentPortal(PopoverOverlayComponent, this.viewContainerRef);
+        const componentRef = this.overlayRef.attach(overlayPortal);
+        this.popoverInstance = componentRef.instance;
+        // Configure the overlay component
+        this.popoverInstance.size.set(this.twPopoverSize());
+        this.popoverInstance.color.set(this.twPopoverColor());
+        this.popoverInstance.showArrow.set(this.twPopoverArrow());
+        this.popoverInstance.ariaLabel.set(this.twPopoverAriaLabel());
+        this.popoverInstance.ariaModal.set(this.twPopoverTrapFocus());
+        this.popoverInstance.ariaLabelledByQueue.set([]);
+        this.popoverInstance.panelClass.set(this.resolvePanelClass());
+        // Provide POPOVER_REF for both template and component content. Title directives
+        // call _addAriaLabelledBy / _removeAriaLabelledBy to register their id with the
+        // overlay's aria-labelledby queue.
+        const overlayInstance = this.popoverInstance;
+        const popoverRef = {
+            close: () => this.close(),
+            _addAriaLabelledBy: (id) => overlayInstance._addAriaLabelledBy(id),
+            _removeAriaLabelledBy: (id) => overlayInstance._removeAriaLabelledBy(id),
+        };
+        // Create the content portal
+        if (content instanceof TemplateRef) {
+            const context = {
+                $implicit: this.twPopoverData(),
+                close: () => this.close(),
+            };
+            const templateInjector = Injector.create({
+                parent: this.injector,
+                providers: [
+                    { provide: POPOVER_DATA, useValue: this.twPopoverData() },
+                    { provide: POPOVER_REF, useValue: popoverRef },
+                ],
+            });
+            const templatePortal = new TemplatePortal(content, this.viewContainerRef, context, templateInjector);
+            this.popoverInstance.portal.set(templatePortal);
+        }
+        else {
+            const contentInjector = Injector.create({
+                parent: this.injector,
+                providers: [
+                    { provide: POPOVER_DATA, useValue: this.twPopoverData() },
+                    { provide: POPOVER_REF, useValue: popoverRef },
+                ],
+            });
+            const componentPortal = new ComponentPortal(content, this.viewContainerRef, contentInjector);
+            this.popoverInstance.portal.set(componentPortal);
+        }
+    }
+    setupFocusTrap() {
+        if (!this.twPopoverTrapFocus() || !this.overlayRef)
+            return;
+        const overlayEl = this.overlayRef.overlayElement;
+        this.focusTrap = this.focusTrapFactory.create(overlayEl);
+        this.focusTrap.focusInitialElementWhenReady();
+    }
+    destroyFocusTrap() {
+        this.focusTrap?.destroy();
+        this.focusTrap = null;
+    }
+    disposeOverlay() {
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.popoverInstance = null;
+    }
+    clearCloseTimer() {
+        if (this.closeTimer !== null) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = null;
+        }
+    }
+    resolveScrollStrategy() {
+        const strategy = this.twPopoverScrollStrategy();
+        switch (strategy) {
+            case 'close':
+                return this.overlay.scrollStrategies.close();
+            case 'block':
+                return this.overlay.scrollStrategies.block();
+            case 'noop':
+                return this.overlay.scrollStrategies.noop();
+            default:
+                return this.overlay.scrollStrategies.reposition();
+        }
+    }
+    resolvePanelClass() {
+        const raw = this.twPopoverPanelClass();
+        return Array.isArray(raw) ? raw.join(' ') : raw;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: PopoverDirective, isStandalone: true, selector: "[twPopover]", inputs: { twPopover: { classPropertyName: "twPopover", publicName: "twPopover", isSignal: true, isRequired: true, transformFunction: null }, twPopoverPosition: { classPropertyName: "twPopoverPosition", publicName: "twPopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, twPopoverTriggerOn: { classPropertyName: "twPopoverTriggerOn", publicName: "twPopoverTriggerOn", isSignal: true, isRequired: false, transformFunction: null }, twPopoverDisabled: { classPropertyName: "twPopoverDisabled", publicName: "twPopoverDisabled", isSignal: true, isRequired: false, transformFunction: null }, twPopoverOpen: { classPropertyName: "twPopoverOpen", publicName: "twPopoverOpen", isSignal: true, isRequired: false, transformFunction: null }, twPopoverSize: { classPropertyName: "twPopoverSize", publicName: "twPopoverSize", isSignal: true, isRequired: false, transformFunction: null }, twPopoverOffset: { classPropertyName: "twPopoverOffset", publicName: "twPopoverOffset", isSignal: true, isRequired: false, transformFunction: null }, twPopoverArrow: { classPropertyName: "twPopoverArrow", publicName: "twPopoverArrow", isSignal: true, isRequired: false, transformFunction: null }, twPopoverBackdrop: { classPropertyName: "twPopoverBackdrop", publicName: "twPopoverBackdrop", isSignal: true, isRequired: false, transformFunction: null }, twPopoverCloseOnOutside: { classPropertyName: "twPopoverCloseOnOutside", publicName: "twPopoverCloseOnOutside", isSignal: true, isRequired: false, transformFunction: null }, twPopoverCloseOnEscape: { classPropertyName: "twPopoverCloseOnEscape", publicName: "twPopoverCloseOnEscape", isSignal: true, isRequired: false, transformFunction: null }, twPopoverScrollStrategy: { classPropertyName: "twPopoverScrollStrategy", publicName: "twPopoverScrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, twPopoverTrapFocus: { classPropertyName: "twPopoverTrapFocus", publicName: "twPopoverTrapFocus", isSignal: true, isRequired: false, transformFunction: null }, twPopoverData: { classPropertyName: "twPopoverData", publicName: "twPopoverData", isSignal: true, isRequired: false, transformFunction: null }, twPopoverPanelClass: { classPropertyName: "twPopoverPanelClass", publicName: "twPopoverPanelClass", isSignal: true, isRequired: false, transformFunction: null }, twPopoverColor: { classPropertyName: "twPopoverColor", publicName: "twPopoverColor", isSignal: true, isRequired: false, transformFunction: null }, twPopoverAriaLabel: { classPropertyName: "twPopoverAriaLabel", publicName: "twPopoverAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { twPopoverOpen: "twPopoverOpenChange", twPopoverOpened: "twPopoverOpened", twPopoverClosed: "twPopoverClosed" }, host: { listeners: { "click": "onHostClick()", "focus": "onHostFocus()", "blur": "onHostBlur()", "keydown.escape": "onEscape()" }, properties: { "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "twPopoverOpen()", "attr.aria-controls": "overlayComponentId()" } }, exportAs: ["twPopover"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PopoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twPopover]',
+                    exportAs: 'twPopover',
+                    host: {
+                        '[attr.aria-haspopup]': '"dialog"',
+                        '[attr.aria-expanded]': 'twPopoverOpen()',
+                        '[attr.aria-controls]': 'overlayComponentId()',
+                        '(click)': 'onHostClick()',
+                        '(focus)': 'onHostFocus()',
+                        '(blur)': 'onHostBlur()',
+                        '(keydown.escape)': 'onEscape()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { twPopover: [{ type: i0.Input, args: [{ isSignal: true, alias: "twPopover", required: true }] }], twPopoverPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "twPopoverPosition", required: false }] }], twPopoverTriggerOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "twPopoverTriggerOn", required: false }] }], twPopoverDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "twPopoverDisabled", required: false }] }], twPopoverOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "twPopoverOpen", required: false }] }, { type: i0.Output, args: ["twPopoverOpenChange"] }], twPopoverSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "twPopoverSize", required: false }] }], twPopoverOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "twPopoverOffset", required: false }] }], twPopoverArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "twPopoverArrow", required: false }] }], twPopoverBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "twPopoverBackdrop", required: false }] }], twPopoverCloseOnOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "twPopoverCloseOnOutside", required: false }] }], twPopoverCloseOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "twPopoverCloseOnEscape", required: false }] }], twPopoverScrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "twPopoverScrollStrategy", required: false }] }], twPopoverTrapFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "twPopoverTrapFocus", required: false }] }], twPopoverData: [{ type: i0.Input, args: [{ isSignal: true, alias: "twPopoverData", required: false }] }], twPopoverPanelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "twPopoverPanelClass", required: false }] }], twPopoverColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "twPopoverColor", required: false }] }], twPopoverAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "twPopoverAriaLabel", required: false }] }], twPopoverOpened: [{ type: i0.Output, args: ["twPopoverOpened"] }], twPopoverClosed: [{ type: i0.Output, args: ["twPopoverClosed"] }] } });
+
+/**
+ * Convenience directive that closes the enclosing popover when the host element is clicked.
+ * Place on any element inside popover content.
+ *
+ * ```html
+ * <button twPopoverClose>Cancel</button>
+ * ```
+ */
+class PopoverCloseDirective {
+    popoverRef = inject(POPOVER_REF, { optional: true });
+    closePopover() {
+        this.popoverRef?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PopoverCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: PopoverCloseDirective, isStandalone: true, selector: "[twPopoverClose]", host: { listeners: { "click": "closePopover()" }, properties: { "attr.type": "\"button\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PopoverCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twPopoverClose]',
+                    host: {
+                        '(click)': 'closePopover()',
+                        '[attr.type]': '"button"',
+                    },
+                }]
+        }] });
+
+/**
+ * Popover title. Registers its ID with the enclosing popover overlay's
+ * `aria-labelledby` queue so screen readers announce it automatically.
+ *
+ * Mirrors `DialogTitleDirective` and is the recommended way to label a
+ * popover whose content has a heading. Use `twPopoverAriaLabel` when no
+ * heading is present.
+ */
+class PopoverTitleDirective {
+    generatedId = inject(_IdGenerator).getId('tw-popover-title-');
+    elementRef = inject(ElementRef);
+    popoverRef = inject(POPOVER_REF, { optional: true });
+    /** Custom id for the title element. Defaults to a generated unique id. */
+    id = input(this.generatedId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.popoverRef?._addAriaLabelledBy?.(this.id());
+    }
+    ngOnDestroy() {
+        this.popoverRef?._removeAriaLabelledBy?.(this.id());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PopoverTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: PopoverTitleDirective, isStandalone: true, selector: "[twPopoverTitle], tw-popover-title", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id()" }, classAttribute: "text-sm font-semibold text-fg" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PopoverTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twPopoverTitle], tw-popover-title',
+                    host: {
+                        class: 'text-sm font-semibold text-fg',
+                        '[id]': 'id()',
+                    },
+                }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { POPOVER_DATA, POPOVER_REF, PopoverCloseDirective, PopoverDirective, PopoverTitleDirective };
+//# sourceMappingURL=cdevhub-ngx-tw-popover.mjs.map