@radix-ng/primitives 0.19.0 → 0.20.1

package/fesm2022/radix-ng-primitives-popover.mjs

@@ -0,0 +1,796 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, isDevMode, assertInInjectionContext, inject, Renderer2, ElementRef, input, computed, signal, effect, untracked, forwardRef, Directive, TemplateRef, DestroyRef, output, SimpleChange, contentChild, ViewContainerRef, NgModule } from '@angular/core';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/cdk/overlay';
+import { Overlay, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { filter, tap } from 'rxjs';
+import { DOCUMENT } from '@angular/common';
+
+const RdxPopoverArrowToken = new InjectionToken('RdxPopoverArrowToken');
+
+const RdxPopoverRootToken = new InjectionToken('RdxPopoverRootToken');
+
+function injectPopoverRoot() {
+    isDevMode() && assertInInjectionContext(injectPopoverRoot);
+    return inject(RdxPopoverRootToken);
+}
+
+var RdxPopoverSide;
+(function (RdxPopoverSide) {
+    RdxPopoverSide["Top"] = "top";
+    RdxPopoverSide["Right"] = "right";
+    RdxPopoverSide["Bottom"] = "bottom";
+    RdxPopoverSide["Left"] = "left";
+})(RdxPopoverSide || (RdxPopoverSide = {}));
+var RdxPopoverAlign;
+(function (RdxPopoverAlign) {
+    RdxPopoverAlign["Start"] = "start";
+    RdxPopoverAlign["Center"] = "center";
+    RdxPopoverAlign["End"] = "end";
+})(RdxPopoverAlign || (RdxPopoverAlign = {}));
+
+const POPOVER_POSITIONS = {
+    [RdxPopoverSide.Top]: {
+        [RdxPopoverAlign.Center]: {
+            originX: 'center',
+            originY: 'top',
+            overlayX: 'center',
+            overlayY: 'bottom'
+        },
+        [RdxPopoverAlign.Start]: {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom'
+        },
+        [RdxPopoverAlign.End]: {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'bottom'
+        }
+    },
+    [RdxPopoverSide.Right]: {
+        [RdxPopoverAlign.Center]: {
+            originX: 'end',
+            originY: 'center',
+            overlayX: 'start',
+            overlayY: 'center'
+        },
+        [RdxPopoverAlign.Start]: {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'top'
+        },
+        [RdxPopoverAlign.End]: {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'bottom'
+        }
+    },
+    [RdxPopoverSide.Bottom]: {
+        [RdxPopoverAlign.Center]: {
+            originX: 'center',
+            originY: 'bottom',
+            overlayX: 'center',
+            overlayY: 'top'
+        },
+        [RdxPopoverAlign.Start]: {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top'
+        },
+        [RdxPopoverAlign.End]: {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top'
+        }
+    },
+    [RdxPopoverSide.Left]: {
+        [RdxPopoverAlign.Center]: {
+            originX: 'start',
+            originY: 'center',
+            overlayX: 'end',
+            overlayY: 'center'
+        },
+        [RdxPopoverAlign.Start]: {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'top'
+        },
+        [RdxPopoverAlign.End]: {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'bottom'
+        }
+    }
+};
+const DEFAULTS = {
+    offsets: {
+        side: 10,
+        align: 10
+    }
+};
+
+let allPossibleConnectedPositions;
+function getAllPossibleConnectedPositions() {
+    if (!allPossibleConnectedPositions) {
+        allPossibleConnectedPositions = new Map();
+    }
+    if (allPossibleConnectedPositions.size < 1) {
+        Object.keys(POPOVER_POSITIONS).forEach((side) => {
+            Object.keys(POPOVER_POSITIONS[side] ?? {}).forEach((align) => {
+                allPossibleConnectedPositions.set(`${side}|${align}`, POPOVER_POSITIONS[side][align]);
+            });
+        });
+    }
+    return allPossibleConnectedPositions;
+}
+function getSideAndAlignFromAllPossibleConnectedPositions(position) {
+    const allPossibleConnectedPositions = getAllPossibleConnectedPositions();
+    let sideAndAlign;
+    allPossibleConnectedPositions.forEach((value, key) => {
+        if (position.originX === value.originX &&
+            position.originY === value.originY &&
+            position.overlayX === value.overlayX &&
+            position.overlayY === value.overlayY) {
+            const sideAndAlignArray = key.split('|');
+            sideAndAlign = {
+                side: sideAndAlignArray[0],
+                align: sideAndAlignArray[1]
+            };
+        }
+    });
+    if (!sideAndAlign) {
+        throw Error(`[RdxPopover] cannot infer both side and align from the given position (${JSON.stringify(position)})`);
+    }
+    return sideAndAlign;
+}
+function getContentPosition(sideAndAlignWithOffsets) {
+    const { side, align, sideOffset, alignOffset } = sideAndAlignWithOffsets;
+    const position = {
+        ...(POPOVER_POSITIONS[side]?.[align] ?? POPOVER_POSITIONS[RdxPopoverSide.Top][RdxPopoverAlign.Center])
+    };
+    if (sideOffset > 0) {
+        let xFactor = 0;
+        let yFactor = 0;
+        switch (side) {
+            case RdxPopoverSide.Top:
+                yFactor = -1;
+                break;
+            case RdxPopoverSide.Bottom:
+                yFactor = 1;
+                break;
+            case RdxPopoverSide.Left:
+                xFactor = -1;
+                break;
+            case RdxPopoverSide.Right:
+                xFactor = 1;
+                break;
+        }
+        position.offsetX = xFactor * sideOffset;
+        position.offsetY = yFactor * sideOffset;
+    }
+    if ([RdxPopoverAlign.Start, RdxPopoverAlign.End].includes(align) && alignOffset) {
+        const alignOffsetFactor = align === RdxPopoverAlign.End ? -1 : 1;
+        position.offsetX = alignOffsetFactor * alignOffset;
+    }
+    return position;
+}
+function getArrowPositionParams(sideAndAlign, arrowWidthAndHeight, triggerWidthAndHeight) {
+    const posParams = {
+        top: '',
+        bottom: '',
+        left: '',
+        right: '',
+        transform: ''
+    };
+    if ([RdxPopoverSide.Top, RdxPopoverSide.Bottom].includes(sideAndAlign.side)) {
+        if (sideAndAlign.side === RdxPopoverSide.Top) {
+            posParams.top = '100%';
+        }
+        else {
+            posParams.top = `-${arrowWidthAndHeight.height}px`;
+            posParams.transform = `rotate(180deg)`;
+        }
+        if (sideAndAlign.align === RdxPopoverAlign.Start) {
+            posParams.left = `${(triggerWidthAndHeight.width - arrowWidthAndHeight.width) / 2}px`;
+        }
+        else if (sideAndAlign.align === RdxPopoverAlign.Center) {
+            posParams.left = `calc(50% - ${arrowWidthAndHeight.width / 2}px)`;
+        }
+        else if (sideAndAlign.align === RdxPopoverAlign.End) {
+            posParams.right = `${(triggerWidthAndHeight.width - arrowWidthAndHeight.width) / 2}px`;
+        }
+    }
+    else if ([RdxPopoverSide.Left, RdxPopoverSide.Right].includes(sideAndAlign.side)) {
+        if (sideAndAlign.side === RdxPopoverSide.Left) {
+            posParams.right = `-${arrowWidthAndHeight.width}px`;
+            posParams.transform = `rotate(-90deg) translate(0, -50%)`;
+        }
+        else {
+            posParams.left = `-${arrowWidthAndHeight.width}px`;
+            posParams.transform = `rotate(90deg) translate(0, -50%)`;
+        }
+        if (sideAndAlign.align === RdxPopoverAlign.Start) {
+            posParams.top = `${(triggerWidthAndHeight.height - arrowWidthAndHeight.height) / 2}px`;
+        }
+        else if (sideAndAlign.align === RdxPopoverAlign.Center) {
+            posParams.top = `calc(50% - ${arrowWidthAndHeight.height / 2}px)`;
+        }
+        else if (sideAndAlign.align === RdxPopoverAlign.End) {
+            posParams.bottom = `${(triggerWidthAndHeight.height - arrowWidthAndHeight.height) / 2}px`;
+        }
+    }
+    return posParams;
+}
+
+class RdxPopoverArrowDirective {
+    constructor() {
+        /** @ignore */
+        this.renderer = inject(Renderer2);
+        /** @ignore */
+        this.popoverRoot = injectPopoverRoot();
+        /** @ignore */
+        this.elementRef = inject(ElementRef);
+        /**
+         * The width of the arrow in pixels.
+         */
+        this.width = input(10);
+        /**
+         * The height of the arrow in pixels.
+         */
+        this.height = input(5);
+        /** @ignore */
+        this.arrowSvgElement = computed(() => {
+            const width = this.width();
+            const height = this.height();
+            const svgElement = this.renderer.createElement('svg', 'svg');
+            this.renderer.setAttribute(svgElement, 'viewBox', '0 0 30 10');
+            this.renderer.setAttribute(svgElement, 'width', String(width));
+            this.renderer.setAttribute(svgElement, 'height', String(height));
+            const polygonElement = this.renderer.createElement('polygon', 'svg');
+            this.renderer.setAttribute(polygonElement, 'points', '0,0 30,0 15,10');
+            this.renderer.setAttribute(svgElement, 'preserveAspectRatio', 'none');
+            this.renderer.appendChild(svgElement, polygonElement);
+            return svgElement;
+        });
+        /** @ignore */
+        this.currentArrowSvgElement = signal(void 0);
+        /** @ignore */
+        this.position = toSignal(this.popoverRoot.popoverContentDirective().positionChange());
+        this.onArrowSvgElementChangeEffect();
+        this.onContentPositionChangeEffect();
+    }
+    /** @ignore */
+    ngAfterViewInit() {
+        if (this.elementRef.nativeElement.parentElement) {
+            this.renderer.setStyle(this.elementRef.nativeElement.parentElement, 'position', 'relative');
+        }
+        this.renderer.setStyle(this.elementRef.nativeElement, 'position', 'absolute');
+        this.renderer.setStyle(this.elementRef.nativeElement, 'boxSizing', '');
+        this.renderer.setStyle(this.elementRef.nativeElement, 'fontSize', '0px');
+        this.triggerRect = this.popoverRoot.popoverTriggerDirective().elementRef.nativeElement.getBoundingClientRect();
+    }
+    /** @ignore */
+    setPosition(position) {
+        const posParams = getArrowPositionParams(getSideAndAlignFromAllPossibleConnectedPositions(position.connectionPair), { width: this.width(), height: this.height() }, { width: this.triggerRect.width, height: this.triggerRect.height });
+        this.renderer.setStyle(this.elementRef.nativeElement, 'top', posParams.top);
+        this.renderer.setStyle(this.elementRef.nativeElement, 'bottom', posParams.bottom);
+        this.renderer.setStyle(this.elementRef.nativeElement, 'left', posParams.left);
+        this.renderer.setStyle(this.elementRef.nativeElement, 'right', posParams.right);
+        this.renderer.setStyle(this.elementRef.nativeElement, 'transform', posParams.transform);
+    }
+    /** @ignore */
+    onArrowSvgElementChangeEffect() {
+        effect(() => {
+            const arrowElement = this.arrowSvgElement();
+            untracked(() => {
+                const currentArrowSvgElement = this.currentArrowSvgElement();
+                if (currentArrowSvgElement) {
+                    this.renderer.removeChild(this.elementRef.nativeElement, currentArrowSvgElement);
+                }
+                this.currentArrowSvgElement.set(arrowElement);
+                this.renderer.setStyle(this.elementRef.nativeElement, 'width', `${this.width()}px`);
+                this.renderer.setStyle(this.elementRef.nativeElement, 'height', `${this.height()}px`);
+                this.renderer.appendChild(this.elementRef.nativeElement, this.currentArrowSvgElement());
+            });
+        });
+    }
+    /** @ignore */
+    onContentPositionChangeEffect() {
+        effect(() => {
+            const position = this.position();
+            untracked(() => {
+                if (!position) {
+                    return;
+                }
+                this.setPosition(position);
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverArrowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.11", type: RdxPopoverArrowDirective, isStandalone: true, selector: "[rdxPopoverArrow]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: RdxPopoverArrowToken,
+                useExisting: forwardRef(() => RdxPopoverArrowDirective)
+            }
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverArrowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPopoverArrow]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: RdxPopoverArrowToken,
+                            useExisting: forwardRef(() => RdxPopoverArrowDirective)
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
+class RdxPopoverCloseDirective {
+    constructor() {
+        /** @ignore */
+        this.popoverRoot = injectPopoverRoot();
+        /** @ignore */
+        this.elementRef = inject((ElementRef));
+        /** @ignore */
+        this.renderer = inject(Renderer2);
+        this.onIsControlledExternallyEffect();
+    }
+    /** @ignore */
+    onIsControlledExternallyEffect() {
+        effect(() => {
+            const isControlledExternally = this.popoverRoot.controlledExternally()();
+            untracked(() => {
+                this.renderer.setStyle(this.elementRef.nativeElement, 'display', isControlledExternally ? 'none' : null);
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: RdxPopoverCloseDirective, isStandalone: true, selector: "[rdxPopoverClose]", host: { attributes: { "type": "button" }, listeners: { "click": "popoverRoot.handleClose()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPopoverClose]',
+                    standalone: true,
+                    host: {
+                        type: 'button',
+                        '(click)': 'popoverRoot.handleClose()'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+class RdxPopoverContentDirective {
+    constructor() {
+        /** @ignore */
+        this.popoverRoot = injectPopoverRoot();
+        /** @ignore */
+        this.templateRef = inject(TemplateRef);
+        /** @ignore */
+        this.overlay = inject(Overlay);
+        /** @ignore */
+        this.destroyRef = inject(DestroyRef);
+        /** @ignore */
+        this.connectedOverlay = inject(CdkConnectedOverlay);
+        /**
+         * The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
+         */
+        this.side = input(RdxPopoverSide.Top);
+        /**
+         * The distance in pixels from the trigger.
+         */
+        this.sideOffset = input(void 0);
+        /**
+         * The preferred alignment against the trigger. May change when collisions occur.
+         */
+        this.align = input(RdxPopoverAlign.Center);
+        /**
+         * An offset in pixels from the "start" or "end" alignment options.
+         */
+        this.alignOffset = input(void 0);
+        /**
+         * Whether to add some alternate positions of the content.
+         */
+        this.disableAlternatePositions = input(false);
+        /** @ingore */
+        this.positions = computed(() => {
+            const greatestDimensionFromTheArrow = Math.max(this.popoverRoot.popoverArrowDirective()?.width() ?? 0, this.popoverRoot.popoverArrowDirective()?.height() ?? 0);
+            const offsets = {
+                sideOffset: this.sideOffset() ?? (greatestDimensionFromTheArrow || DEFAULTS.offsets.side),
+                alignOffset: this.alignOffset() ?? (greatestDimensionFromTheArrow || DEFAULTS.offsets.align)
+            };
+            const basePosition = getContentPosition({
+                side: this.side(),
+                align: this.align(),
+                sideOffset: offsets.sideOffset,
+                alignOffset: offsets.alignOffset
+            });
+            const positions = [basePosition];
+            if (!this.disableAlternatePositions()) {
+                /**
+                 * Alternate positions for better user experience along the X/Y axis (e.g. vertical/horizontal scrolling)
+                 */
+                const allPossibleConnectedPositions = getAllPossibleConnectedPositions();
+                allPossibleConnectedPositions.forEach((value, key) => {
+                    const sideAndAlignArray = key.split('|');
+                    if (sideAndAlignArray[0] !== this.side() ||
+                        sideAndAlignArray[1] !== this.align()) {
+                        positions.push(getContentPosition({
+                            side: sideAndAlignArray[0],
+                            align: sideAndAlignArray[1],
+                            sideOffset: offsets.sideOffset,
+                            alignOffset: offsets.alignOffset
+                        }));
+                    }
+                });
+            }
+            return positions;
+        });
+        /**
+         * Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.
+         */
+        this.onEscapeKeyDown = output();
+        /**
+         * Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.
+         */
+        this.onPointerDownOutside = output();
+        /**
+         * Event handler called when the overlay is atached
+         */
+        this.onShow = output();
+        /**
+         * Event handler called when the overlay is detached
+         */
+        this.onHide = output();
+        this.onPositionChangeEffect();
+        this.onControlledExternallyChangeEffect();
+    }
+    /** @ignore */
+    ngOnInit() {
+        this.setOrigin();
+        this.setScrollStrategy();
+        this.onAttach();
+        this.onDetach();
+        this.connectKeydownEscape();
+        this.connectOutsideClick();
+    }
+    /** @ignore */
+    show() {
+        const prevOpen = this.connectedOverlay.open;
+        this.connectedOverlay.open = true;
+        if (!prevOpen) {
+            this.connectedOverlay.ngOnChanges({ open: new SimpleChange(prevOpen, true, false) });
+        }
+    }
+    /** @ignore */
+    hide() {
+        const prevOpen = this.connectedOverlay.open;
+        this.connectedOverlay.open = false;
+        if (prevOpen) {
+            this.connectedOverlay.ngOnChanges({ open: new SimpleChange(prevOpen, false, false) });
+        }
+    }
+    /** @ignore */
+    positionChange() {
+        return this.connectedOverlay.positionChange.asObservable();
+    }
+    /** @ignore */
+    connectKeydownEscape() {
+        this.connectedOverlay.overlayKeydown
+            .asObservable()
+            .pipe(filter((event) => event.key === 'Escape'), tap((event) => {
+            this.onEscapeKeyDown.emit(event);
+            if (!event.defaultPrevented) {
+                this.popoverRoot.handleClose();
+            }
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+    }
+    /** @ignore */
+    connectOutsideClick() {
+        this.connectedOverlay.overlayOutsideClick
+            .asObservable()
+            .pipe(tap((event) => {
+            this.onPointerDownOutside.emit(event);
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+    }
+    /** @ignore */
+    onAttach() {
+        this.connectedOverlay.attach
+            .asObservable()
+            .pipe(tap(() => {
+            this.onShow.emit();
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+    }
+    /** @ignore */
+    onDetach() {
+        this.connectedOverlay.detach
+            .asObservable()
+            .pipe(tap(() => {
+            this.onHide.emit();
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+    }
+    /** @ignore */
+    setScrollStrategy() {
+        const prevScrollStrategy = this.connectedOverlay.scrollStrategy;
+        this.connectedOverlay.scrollStrategy = this.overlay.scrollStrategies.reposition();
+        this.connectedOverlay.ngOnChanges({
+            scrollStrategy: new SimpleChange(prevScrollStrategy, this.connectedOverlay.scrollStrategy, false)
+        });
+    }
+    /** @ignore */
+    setDisableClose() {
+        const prevDisableClose = this.connectedOverlay.disableClose;
+        this.connectedOverlay.disableClose = this.popoverRoot.controlledExternally()();
+        this.connectedOverlay.ngOnChanges({
+            disableClose: new SimpleChange(prevDisableClose, this.connectedOverlay.disableClose, false)
+        });
+    }
+    /** @ignore */
+    setOrigin() {
+        const prevOrigin = this.connectedOverlay.origin;
+        this.connectedOverlay.origin = this.popoverRoot.popoverTriggerDirective().overlayOrigin;
+        this.connectedOverlay.ngOnChanges({
+            origin: new SimpleChange(prevOrigin, this.connectedOverlay.origin, false)
+        });
+    }
+    /** @ignore */
+    onPositionChangeEffect() {
+        effect(() => {
+            const positions = this.positions();
+            this.disableAlternatePositions();
+            untracked(() => {
+                const prevPositions = this.connectedOverlay.positions;
+                this.connectedOverlay.positions = positions;
+                this.connectedOverlay.ngOnChanges({
+                    positions: new SimpleChange(prevPositions, this.connectedOverlay.positions, false)
+                });
+                this.connectedOverlay.overlayRef?.updatePosition();
+            });
+        });
+    }
+    /** @ignore */
+    onControlledExternallyChangeEffect() {
+        effect(() => {
+            this.popoverRoot.controlledExternally()();
+            untracked(() => {
+                this.setDisableClose();
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.11", type: RdxPopoverContentDirective, isStandalone: true, selector: "[rdxPopoverContent]", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, disableAlternatePositions: { classPropertyName: "disableAlternatePositions", publicName: "disableAlternatePositions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onEscapeKeyDown: "onEscapeKeyDown", onPointerDownOutside: "onPointerDownOutside", onShow: "onShow", onHide: "onHide" }, hostDirectives: [{ directive: i1.CdkConnectedOverlay }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPopoverContent]',
+                    standalone: true,
+                    hostDirectives: [
+                        {
+                            directive: CdkConnectedOverlay
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
+let nextId = 0;
+class RdxPopoverTriggerDirective {
+    constructor() {
+        this.id = input(`rdx-popover-root-${nextId++}`);
+        this.popoverId = computed(() => `rdx-popover-${this.id()}`);
+        /** @ignore */
+        this.popoverRoot = injectPopoverRoot();
+        /** @ignore */
+        this.elementRef = inject((ElementRef));
+        /** @ignore */
+        this.overlayOrigin = inject(CdkOverlayOrigin);
+    }
+    /** @ignore */
+    onClick() {
+        this.popoverRoot.handleToggle();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.11", type: RdxPopoverTriggerDirective, isStandalone: true, selector: "[rdxPopoverTrigger]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" }, properties: { "attr.id": "id()", "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "popoverRoot.isOpen()", "attr.aria-controls": "popoverId()", "attr.data-state": "popoverRoot.state()" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPopoverTrigger]',
+                    standalone: true,
+                    hostDirectives: [CdkOverlayOrigin],
+                    host: {
+                        type: 'button',
+                        '[attr.id]': 'id()',
+                        '[attr.aria-haspopup]': '"dialog"',
+                        '[attr.aria-expanded]': 'popoverRoot.isOpen()',
+                        '[attr.aria-controls]': 'popoverId()',
+                        '[attr.data-state]': 'popoverRoot.state()',
+                        '(click)': 'onClick()'
+                    }
+                }]
+        }] });
+
+class RdxPopoverRootDirective {
+    constructor() {
+        /**
+         * The open state of the popover when it is initially rendered. Use when you do not need to control its open state.
+         */
+        this.defaultOpen = input(false);
+        /**
+         * The controlled open state of the popover. Must be used in conjunction with onOpenChange.
+         */
+        this.open = input();
+        /**
+         * Event handler called when the open state of the popover changes.
+         */
+        this.onOpenChange = output();
+        /** @ignore */
+        this.popoverContentDirective = contentChild.required(RdxPopoverContentDirective);
+        /** @ignore */
+        this.popoverTriggerDirective = contentChild.required(RdxPopoverTriggerDirective);
+        /** @ignore */
+        this.popoverArrowDirective = contentChild(RdxPopoverArrowToken);
+        /** @ignore */
+        this.viewContainerRef = inject(ViewContainerRef);
+        /** @ignore */
+        this.document = inject(DOCUMENT);
+        /** @ignore */
+        this.isOpen = signal(this.defaultOpen());
+        /** @ignore */
+        this.state = computed(() => {
+            const currentIsOpen = this.isOpen();
+            if (currentIsOpen) {
+                return 'open';
+            }
+            return 'closed';
+        });
+        /** @ignore */
+        this.isControlledExternally = computed(() => signal(this.open() !== void 0));
+        this.onOpenChangeEffect();
+        this.onIsOpenChangeEffect();
+    }
+    /** @ignore */
+    ngOnInit() {
+        if (this.defaultOpen()) {
+            this.handleOpen();
+        }
+    }
+    /** @ignore */
+    controlledExternally() {
+        return this.isControlledExternally().asReadonly();
+    }
+    /** @ignore */
+    handleOpen() {
+        if (this.isControlledExternally()()) {
+            return;
+        }
+        this.setOpen(true);
+    }
+    /** @ignore */
+    handleClose() {
+        if (this.isControlledExternally()()) {
+            return;
+        }
+        this.setOpen(false);
+    }
+    /** @ignore */
+    handleToggle() {
+        if (this.isControlledExternally()()) {
+            return;
+        }
+        this.isOpen() ? this.handleClose() : this.handleOpen();
+    }
+    /** @ignore */
+    setOpen(open = false) {
+        if (open) {
+            this.document.dispatchEvent(new CustomEvent('popover.open'));
+        }
+        this.isOpen.set(open);
+        this.onOpenChange.emit(open);
+    }
+    /** @ignore */
+    show() {
+        this.popoverContentDirective().show();
+    }
+    /** @ignore */
+    hide() {
+        this.popoverContentDirective().hide();
+    }
+    /** @ignore */
+    onIsOpenChangeEffect() {
+        effect(() => {
+            const isOpen = this.isOpen();
+            untracked(() => {
+                if (isOpen) {
+                    this.show();
+                }
+                else {
+                    this.hide();
+                }
+            });
+        });
+    }
+    /** @ignore */
+    onOpenChangeEffect() {
+        effect(() => {
+            const currentOpen = this.open();
+            untracked(() => {
+                this.isControlledExternally().set(currentOpen !== void 0);
+                if (this.isControlledExternally()()) {
+                    this.setOpen(currentOpen);
+                }
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.11", type: RdxPopoverRootDirective, isStandalone: true, selector: "[rdxPopoverRoot]", inputs: { defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpenChange: "onOpenChange" }, providers: [
+            {
+                provide: RdxPopoverRootToken,
+                useExisting: forwardRef(() => RdxPopoverRootDirective)
+            }
+        ], queries: [{ propertyName: "popoverContentDirective", first: true, predicate: RdxPopoverContentDirective, descendants: true, isSignal: true }, { propertyName: "popoverTriggerDirective", first: true, predicate: RdxPopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "popoverArrowDirective", first: true, predicate: RdxPopoverArrowToken, descendants: true, isSignal: true }], exportAs: ["rdxPopoverRoot"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverRootDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPopoverRoot]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: RdxPopoverRootToken,
+                            useExisting: forwardRef(() => RdxPopoverRootDirective)
+                        }
+                    ],
+                    exportAs: 'rdxPopoverRoot'
+                }]
+        }], ctorParameters: () => [] });
+
+const _imports = [
+    RdxPopoverArrowDirective,
+    RdxPopoverCloseDirective,
+    RdxPopoverContentDirective,
+    RdxPopoverTriggerDirective,
+    RdxPopoverRootDirective
+];
+class RdxPopoverModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverModule, imports: [RdxPopoverArrowDirective,
+            RdxPopoverCloseDirective,
+            RdxPopoverContentDirective,
+            RdxPopoverTriggerDirective,
+            RdxPopoverRootDirective], exports: [RdxPopoverArrowDirective,
+            RdxPopoverCloseDirective,
+            RdxPopoverContentDirective,
+            RdxPopoverTriggerDirective,
+            RdxPopoverRootDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [..._imports],
+                    exports: [..._imports]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RdxPopoverAlign, RdxPopoverArrowDirective, RdxPopoverCloseDirective, RdxPopoverContentDirective, RdxPopoverModule, RdxPopoverRootDirective, RdxPopoverSide, RdxPopoverTriggerDirective };
+//# sourceMappingURL=radix-ng-primitives-popover.mjs.map