@radix-ng/primitives 0.20.1 → 0.21.0

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

@@ -1,19 +1,18 @@
 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 { InjectionToken, inject, TemplateRef, DestroyRef, computed, input, output, effect, untracked, SimpleChange, Directive, ElementRef, signal, booleanAttribute, contentChild, ViewContainerRef, afterNextRender, isDevMode, assertInInjectionContext, forwardRef, Renderer2, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
 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';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { filter, tap } from 'rxjs';
+
+const RdxPopoverAnchorToken = new InjectionToken('RdxPopoverAnchorToken');
 
 const RdxPopoverArrowToken = new InjectionToken('RdxPopoverArrowToken');
 
-const RdxPopoverRootToken = new InjectionToken('RdxPopoverRootToken');
+const RdxPopoverCloseToken = new InjectionToken('RdxPopoverCloseToken');
 
-function injectPopoverRoot() {
-    isDevMode() && assertInInjectionContext(injectPopoverRoot);
-    return inject(RdxPopoverRootToken);
-}
+const RdxPopoverContentAttributesToken = new InjectionToken('RdxPopoverContentAttributesToken');
 
 var RdxPopoverSide;
 (function (RdxPopoverSide) {
@@ -28,6 +27,23 @@ var RdxPopoverAlign;
     RdxPopoverAlign["Center"] = "center";
     RdxPopoverAlign["End"] = "end";
 })(RdxPopoverAlign || (RdxPopoverAlign = {}));
+var RdxPopoverState;
+(function (RdxPopoverState) {
+    RdxPopoverState["OPEN"] = "open";
+    RdxPopoverState["CLOSED"] = "closed";
+})(RdxPopoverState || (RdxPopoverState = {}));
+var RdxPopoverAttachDetachEvent;
+(function (RdxPopoverAttachDetachEvent) {
+    RdxPopoverAttachDetachEvent["ATTACH"] = "attach";
+    RdxPopoverAttachDetachEvent["DETACH"] = "detach";
+})(RdxPopoverAttachDetachEvent || (RdxPopoverAttachDetachEvent = {}));
+var RdxPopoverAnimationStatus;
+(function (RdxPopoverAnimationStatus) {
+    RdxPopoverAnimationStatus["OPEN_STARTED"] = "open_started";
+    RdxPopoverAnimationStatus["OPEN_ENDED"] = "open_ended";
+    RdxPopoverAnimationStatus["CLOSED_STARTED"] = "closed_started";
+    RdxPopoverAnimationStatus["CLOSED_ENDED"] = "closed_ended";
+})(RdxPopoverAnimationStatus || (RdxPopoverAnimationStatus = {}));
 
 const POPOVER_POSITIONS = {
     [RdxPopoverSide.Top]: {
@@ -114,7 +130,7 @@ const POPOVER_POSITIONS = {
 const DEFAULTS = {
     offsets: {
         side: 10,
-        align: 10
+        align: 0
     }
 };
 
@@ -186,9 +202,7 @@ function getContentPosition(sideAndAlignWithOffsets) {
 function getArrowPositionParams(sideAndAlign, arrowWidthAndHeight, triggerWidthAndHeight) {
     const posParams = {
         top: '',
-        bottom: '',
         left: '',
-        right: '',
         transform: ''
     };
     if ([RdxPopoverSide.Top, RdxPopoverSide.Bottom].includes(sideAndAlign.side)) {
@@ -206,12 +220,12 @@ function getArrowPositionParams(sideAndAlign, arrowWidthAndHeight, triggerWidthA
             posParams.left = `calc(50% - ${arrowWidthAndHeight.width / 2}px)`;
         }
         else if (sideAndAlign.align === RdxPopoverAlign.End) {
-            posParams.right = `${(triggerWidthAndHeight.width - arrowWidthAndHeight.width) / 2}px`;
+            posParams.left = `calc(100% - ${(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.left = `100%`;
             posParams.transform = `rotate(-90deg) translate(0, -50%)`;
         }
         else {
@@ -225,152 +239,12 @@ function getArrowPositionParams(sideAndAlign, arrowWidthAndHeight, triggerWidthA
             posParams.top = `calc(50% - ${arrowWidthAndHeight.height / 2}px)`;
         }
         else if (sideAndAlign.align === RdxPopoverAlign.End) {
-            posParams.bottom = `${(triggerWidthAndHeight.height - arrowWidthAndHeight.height) / 2}px`;
+            posParams.top = `calc(100% - ${(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 */
@@ -383,103 +257,80 @@ class RdxPopoverContentDirective {
         this.destroyRef = inject(DestroyRef);
         /** @ignore */
         this.connectedOverlay = inject(CdkConnectedOverlay);
+        /** @ignore */
+        this.name = computed(() => `rdx-popover-trigger-${this.popoverRoot.uniqueId()}`);
         /**
-         * The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
+         * @description The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
+         * @default top
          */
         this.side = input(RdxPopoverSide.Top);
         /**
-         * The distance in pixels from the trigger.
+         * @description The distance in pixels from the trigger.
+         * @default undefined
          */
         this.sideOffset = input(void 0);
         /**
-         * The preferred alignment against the trigger. May change when collisions occur.
+         * @description The preferred alignment against the trigger. May change when collisions occur.
+         * @default center
          */
         this.align = input(RdxPopoverAlign.Center);
         /**
-         * An offset in pixels from the "start" or "end" alignment options.
+         * @description An offset in pixels from the "start" or "end" alignment options.
+         * @default undefined
          */
         this.alignOffset = input(void 0);
         /**
-         * Whether to add some alternate positions of the content.
+         * @description Whether to add some alternate positions of the content.
+         * @default false
          */
         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.
+         * @description 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.
+         * @description 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();
+        this.onOutsideClick = output();
         /**
-         * Event handler called when the overlay is atached
+         * @description Event handler called after the overlay is open
          */
-        this.onShow = output();
+        this.onOpen = output();
         /**
-         * Event handler called when the overlay is detached
+         * @description Event handler called after the overlay is closed
          */
-        this.onHide = output();
+        this.onClosed = output();
+        /** @ingore */
+        this.positions = computed(() => this.computePositions());
+        this.onOriginChangeEffect();
         this.onPositionChangeEffect();
-        this.onControlledExternallyChangeEffect();
     }
     /** @ignore */
     ngOnInit() {
-        this.setOrigin();
         this.setScrollStrategy();
+        this.setDisableClose();
         this.onAttach();
         this.onDetach();
         this.connectKeydownEscape();
         this.connectOutsideClick();
     }
     /** @ignore */
-    show() {
+    open() {
+        if (this.connectedOverlay.open) {
+            return;
+        }
         const prevOpen = this.connectedOverlay.open;
         this.connectedOverlay.open = true;
-        if (!prevOpen) {
-            this.connectedOverlay.ngOnChanges({ open: new SimpleChange(prevOpen, true, false) });
-        }
+        this.fireOverlayNgOnChanges('open', this.connectedOverlay.open, prevOpen);
     }
     /** @ignore */
-    hide() {
+    close() {
+        if (!this.connectedOverlay.open) {
+            return;
+        }
         const prevOpen = this.connectedOverlay.open;
         this.connectedOverlay.open = false;
-        if (prevOpen) {
-            this.connectedOverlay.ngOnChanges({ open: new SimpleChange(prevOpen, false, false) });
-        }
+        this.fireOverlayNgOnChanges('open', this.connectedOverlay.open, prevOpen);
     }
     /** @ignore */
     positionChange() {
@@ -491,9 +342,8 @@ class RdxPopoverContentDirective {
             .asObservable()
             .pipe(filter((event) => event.key === 'Escape'), tap((event) => {
             this.onEscapeKeyDown.emit(event);
-            if (!event.defaultPrevented) {
-                this.popoverRoot.handleClose();
-            }
+        }), filter((event) => !event.defaultPrevented && !this.popoverRoot.firstDefaultOpen()), tap(() => {
+            this.popoverRoot.handleClose();
         }), takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
@@ -501,8 +351,20 @@ class RdxPopoverContentDirective {
     connectOutsideClick() {
         this.connectedOverlay.overlayOutsideClick
             .asObservable()
-            .pipe(tap((event) => {
-            this.onPointerDownOutside.emit(event);
+            .pipe(
+        /**
+         * Handle the situation when an anchor is added and the anchor becomes the origin of the overlay
+         * hence  the trigger will be considered the outside element
+         */
+        filter((event) => {
+            return (!this.popoverRoot.popoverAnchorDirective() ||
+                !this.popoverRoot
+                    .popoverTriggerDirective()
+                    .elementRef.nativeElement.contains(event.target));
+        }), tap((event) => {
+            this.onOutsideClick.emit(event);
+        }), filter((event) => !event.defaultPrevented && !this.popoverRoot.firstDefaultOpen()), tap(() => {
+            this.popoverRoot.handleClose();
         }), takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
@@ -511,7 +373,10 @@ class RdxPopoverContentDirective {
         this.connectedOverlay.attach
             .asObservable()
             .pipe(tap(() => {
-            this.onShow.emit();
+            /**
+             * `this.onOpen.emit();` is being delegated to the root directive due to the opening animation
+             */
+            this.popoverRoot.attachDetachEvent.set(RdxPopoverAttachDetachEvent.ATTACH);
         }), takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
@@ -520,7 +385,10 @@ class RdxPopoverContentDirective {
         this.connectedOverlay.detach
             .asObservable()
             .pipe(tap(() => {
-            this.onHide.emit();
+            /**
+             * `this.onClosed.emit();` is being delegated to the root directive due to the closing animation
+             */
+            this.popoverRoot.attachDetachEvent.set(RdxPopoverAttachDetachEvent.DETACH);
         }), takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
@@ -528,24 +396,68 @@ class RdxPopoverContentDirective {
     setScrollStrategy() {
         const prevScrollStrategy = this.connectedOverlay.scrollStrategy;
         this.connectedOverlay.scrollStrategy = this.overlay.scrollStrategies.reposition();
-        this.connectedOverlay.ngOnChanges({
-            scrollStrategy: new SimpleChange(prevScrollStrategy, this.connectedOverlay.scrollStrategy, false)
-        });
+        this.fireOverlayNgOnChanges('scrollStrategy', this.connectedOverlay.scrollStrategy, prevScrollStrategy);
     }
     /** @ignore */
     setDisableClose() {
         const prevDisableClose = this.connectedOverlay.disableClose;
-        this.connectedOverlay.disableClose = this.popoverRoot.controlledExternally()();
-        this.connectedOverlay.ngOnChanges({
-            disableClose: new SimpleChange(prevDisableClose, this.connectedOverlay.disableClose, false)
-        });
+        this.connectedOverlay.disableClose = true;
+        this.fireOverlayNgOnChanges('disableClose', this.connectedOverlay.disableClose, prevDisableClose);
     }
     /** @ignore */
-    setOrigin() {
+    setOrigin(origin) {
         const prevOrigin = this.connectedOverlay.origin;
-        this.connectedOverlay.origin = this.popoverRoot.popoverTriggerDirective().overlayOrigin;
-        this.connectedOverlay.ngOnChanges({
-            origin: new SimpleChange(prevOrigin, this.connectedOverlay.origin, false)
+        this.connectedOverlay.origin = origin;
+        this.fireOverlayNgOnChanges('origin', this.connectedOverlay.origin, prevOrigin);
+    }
+    /** @ignore */
+    setPositions(positions) {
+        const prevPositions = this.connectedOverlay.positions;
+        this.connectedOverlay.positions = positions;
+        this.fireOverlayNgOnChanges('positions', this.connectedOverlay.positions, prevPositions);
+        this.connectedOverlay.overlayRef?.updatePosition();
+    }
+    /** @ignore */
+    computePositions() {
+        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() ?? 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((_, 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;
+    }
+    onOriginChangeEffect() {
+        effect(() => {
+            const origin = (this.popoverRoot.popoverAnchorDirective() ?? this.popoverRoot.popoverTriggerDirective())
+                .overlayOrigin;
+            untracked(() => {
+                this.setOrigin(origin);
+            });
         });
     }
     /** @ignore */
@@ -554,26 +466,18 @@ class RdxPopoverContentDirective {
             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();
+                this.setPositions(positions);
             });
         });
     }
     /** @ignore */
-    onControlledExternallyChangeEffect() {
-        effect(() => {
-            this.popoverRoot.controlledExternally()();
-            untracked(() => {
-                this.setDisableClose();
-            });
+    fireOverlayNgOnChanges(input, currentValue, previousValue, firstChange = false) {
+        this.connectedOverlay.ngOnChanges({
+            [input]: new SimpleChange(previousValue, currentValue, firstChange)
         });
     }
     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 }); }
+    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", onOutsideClick: "onOutsideClick", onOpen: "onOpen", onClosed: "onClosed" }, hostDirectives: [{ directive: i1.CdkConnectedOverlay }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverContentDirective, decorators: [{
             type: Directive,
@@ -581,31 +485,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
                     selector: '[rdxPopoverContent]',
                     standalone: true,
                     hostDirectives: [
-                        {
-                            directive: CdkConnectedOverlay
-                        }
+                        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));
+        this.elementRef = inject(ElementRef);
         /** @ignore */
         this.overlayOrigin = inject(CdkOverlayOrigin);
+        /** @ignore */
+        this.name = computed(() => `rdx-popover-trigger-${this.popoverRoot.uniqueId()}`);
     }
     /** @ignore */
-    onClick() {
+    click() {
         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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: RdxPopoverTriggerDirective, isStandalone: true, selector: "[rdxPopoverTrigger]", host: { attributes: { "type": "button" }, listeners: { "click": "click()" }, properties: { "attr.id": "name()", "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "popoverRoot.isOpen()", "attr.aria-controls": "popoverRoot.popoverContentDirective().name()", "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,
@@ -615,30 +516,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
                     hostDirectives: [CdkOverlayOrigin],
                     host: {
                         type: 'button',
-                        '[attr.id]': 'id()',
+                        '[attr.id]': 'name()',
                         '[attr.aria-haspopup]': '"dialog"',
                         '[attr.aria-expanded]': 'popoverRoot.isOpen()',
-                        '[attr.aria-controls]': 'popoverId()',
+                        '[attr.aria-controls]': 'popoverRoot.popoverContentDirective().name()',
                         '[attr.data-state]': 'popoverRoot.state()',
-                        '(click)': 'onClick()'
+                        '(click)': 'click()'
                     }
                 }]
         }] });
 
+let nextId = 0;
 class RdxPopoverRootDirective {
     constructor() {
+        /** @ignore */
+        this.uniqueId = signal(++nextId);
+        /** @ignore */
+        this.name = computed(() => `rdx-popover-root-${this.uniqueId()}`);
         /**
-         * The open state of the popover when it is initially rendered. Use when you do not need to control its open state.
+         * @description The anchor directive that comes form outside the popover root
+         * @default undefined
+         */
+        this.anchor = input(void 0);
+        /**
+         * @description The open state of the popover when it is initially rendered. Use when you do not need to control its open state.
+         * @default false
          */
         this.defaultOpen = input(false);
         /**
-         * The controlled open state of the popover. Must be used in conjunction with onOpenChange.
+         * @description The controlled state of the popover. `open` input take precedence of `defaultOpen` input.
+         * @default undefined
+         */
+        this.open = input(void 0);
+        /**
+         * @description Whether to control the state of the popover from external. Use in conjunction with `open` input.
+         * @default undefined
          */
-        this.open = input();
+        this.externalControl = input(void 0);
         /**
-         * Event handler called when the open state of the popover changes.
+         * @description Whether to take into account CSS opening/closing animations.
+         * @default false
          */
-        this.onOpenChange = output();
+        this.cssAnimation = input(false, { transform: booleanAttribute });
+        /**
+         * @description Whether to take into account CSS opening animations. `cssAnimation` input must be set to 'true'
+         * @default false
+         */
+        this.cssOpeningAnimation = input(false, { transform: booleanAttribute });
+        /**
+         * @description Whether to take into account CSS closing animations. `cssAnimation` input must be set to 'true'
+         * @default false
+         */
+        this.cssClosingAnimation = input(false, { transform: booleanAttribute });
+        /** @ignore */
+        this.cssAnimationStatus = signal(null);
         /** @ignore */
         this.popoverContentDirective = contentChild.required(RdxPopoverContentDirective);
         /** @ignore */
@@ -646,126 +577,558 @@ class RdxPopoverRootDirective {
         /** @ignore */
         this.popoverArrowDirective = contentChild(RdxPopoverArrowToken);
         /** @ignore */
+        this.popoverCloseDirective = contentChild(RdxPopoverCloseToken);
+        /** @ignore */
+        this.popoverContentAttributesComponent = contentChild(RdxPopoverContentAttributesToken);
+        /** @ignore */
+        this.internalPopoverAnchorDirective = contentChild(RdxPopoverAnchorToken);
+        /** @ignore */
         this.viewContainerRef = inject(ViewContainerRef);
         /** @ignore */
-        this.document = inject(DOCUMENT);
+        this.destroyRef = inject(DestroyRef);
         /** @ignore */
-        this.isOpen = signal(this.defaultOpen());
+        this.state = signal(RdxPopoverState.CLOSED);
         /** @ignore */
-        this.state = computed(() => {
-            const currentIsOpen = this.isOpen();
-            if (currentIsOpen) {
-                return 'open';
-            }
-            return 'closed';
-        });
+        this.attachDetachEvent = signal(RdxPopoverAttachDetachEvent.DETACH);
+        /** @ignore */
+        this.isFirstDefaultOpen = signal(false);
+        /** @ignore */
+        this.popoverAnchorDirective = computed(() => this.internalPopoverAnchorDirective() ?? this.anchor());
         /** @ignore */
-        this.isControlledExternally = computed(() => signal(this.open() !== void 0));
+        this.onAnchorChangeEffect = () => {
+            effect(() => {
+                const anchor = this.anchor();
+                untracked(() => {
+                    if (anchor) {
+                        anchor.setPopoverRoot(this);
+                    }
+                });
+            });
+        };
+        this.onStateChangeEffect();
+        this.onCssAnimationStatusChangeChangeEffect();
         this.onOpenChangeEffect();
-        this.onIsOpenChangeEffect();
+        this.onIsFirstDefaultOpenChangeEffect();
+        this.onAnchorChangeEffect();
+        this.emitOpenOrClosedEventEffect();
+        afterNextRender({
+            write: () => {
+                if (this.defaultOpen() && !this.open()) {
+                    this.isFirstDefaultOpen.set(true);
+                }
+            }
+        });
     }
     /** @ignore */
-    ngOnInit() {
-        if (this.defaultOpen()) {
-            this.handleOpen();
-        }
+    getAnimationParamsSnapshot() {
+        return {
+            cssAnimation: this.cssAnimation(),
+            cssOpeningAnimation: this.cssOpeningAnimation(),
+            cssClosingAnimation: this.cssClosingAnimation(),
+            cssAnimationStatus: this.cssAnimationStatus(),
+            attachDetachEvent: this.attachDetachEvent(),
+            state: this.state(),
+            canEmitOnOpenOrOnClosed: this.canEmitOnOpenOrOnClosed()
+        };
     }
     /** @ignore */
     controlledExternally() {
-        return this.isControlledExternally().asReadonly();
+        return this.externalControl;
+    }
+    /** @ignore */
+    firstDefaultOpen() {
+        return this.isFirstDefaultOpen();
     }
     /** @ignore */
     handleOpen() {
-        if (this.isControlledExternally()()) {
+        if (this.externalControl()) {
             return;
         }
-        this.setOpen(true);
+        this.setState(RdxPopoverState.OPEN);
     }
     /** @ignore */
     handleClose() {
-        if (this.isControlledExternally()()) {
+        if (this.isFirstDefaultOpen()) {
+            this.isFirstDefaultOpen.set(false);
+        }
+        if (this.externalControl()) {
             return;
         }
-        this.setOpen(false);
+        this.setState(RdxPopoverState.CLOSED);
     }
     /** @ignore */
     handleToggle() {
-        if (this.isControlledExternally()()) {
+        if (this.externalControl()) {
             return;
         }
         this.isOpen() ? this.handleClose() : this.handleOpen();
     }
     /** @ignore */
-    setOpen(open = false) {
-        if (open) {
-            this.document.dispatchEvent(new CustomEvent('popover.open'));
+    isOpen(state) {
+        return (state ?? this.state()) === RdxPopoverState.OPEN;
+    }
+    /** @ignore */
+    setState(state = RdxPopoverState.CLOSED) {
+        if (state === this.state()) {
+            return;
         }
-        this.isOpen.set(open);
-        this.onOpenChange.emit(open);
+        this.state.set(state);
+    }
+    /** @ignore */
+    openContent() {
+        this.popoverContentDirective().open();
+        if (!this.cssAnimation() || !this.cssOpeningAnimation()) {
+            this.cssAnimationStatus.set(null);
+        }
+    }
+    /** @ignore */
+    closeContent() {
+        this.popoverContentDirective().close();
+        if (!this.cssAnimation() || !this.cssClosingAnimation()) {
+            this.cssAnimationStatus.set(null);
+        }
+    }
+    /** @ignore */
+    emitOnOpen() {
+        this.popoverContentDirective().onOpen.emit();
+    }
+    /** @ignore */
+    emitOnClosed() {
+        this.popoverContentDirective().onClosed.emit();
+    }
+    /** @ignore */
+    ifOpenOrCloseWithoutAnimations(state) {
+        return (!this.popoverContentAttributesComponent() ||
+            !this.cssAnimation() ||
+            (this.cssAnimation() && !this.cssClosingAnimation() && state === RdxPopoverState.CLOSED) ||
+            (this.cssAnimation() && !this.cssOpeningAnimation() && state === RdxPopoverState.OPEN) ||
+            // !this.cssAnimationStatus() ||
+            (this.cssOpeningAnimation() &&
+                state === RdxPopoverState.OPEN &&
+                [RdxPopoverAnimationStatus.OPEN_STARTED].includes(this.cssAnimationStatus())) ||
+            (this.cssClosingAnimation() &&
+                state === RdxPopoverState.CLOSED &&
+                [RdxPopoverAnimationStatus.CLOSED_STARTED].includes(this.cssAnimationStatus())));
+    }
+    /** @ignore */
+    ifOpenOrCloseWithAnimations(cssAnimationStatus) {
+        return (this.popoverContentAttributesComponent() &&
+            this.cssAnimation() &&
+            cssAnimationStatus &&
+            ((this.cssOpeningAnimation() &&
+                this.state() === RdxPopoverState.OPEN &&
+                [RdxPopoverAnimationStatus.OPEN_ENDED].includes(cssAnimationStatus)) ||
+                (this.cssClosingAnimation() &&
+                    this.state() === RdxPopoverState.CLOSED &&
+                    [RdxPopoverAnimationStatus.CLOSED_ENDED].includes(cssAnimationStatus))));
+    }
+    /** @ignore */
+    openOrClose(state) {
+        const isOpen = this.isOpen(state);
+        isOpen ? this.openContent() : this.closeContent();
     }
     /** @ignore */
-    show() {
-        this.popoverContentDirective().show();
+    emitOnOpenOrOnClosed(state) {
+        this.isOpen(state)
+            ? this.attachDetachEvent() === RdxPopoverAttachDetachEvent.ATTACH && this.emitOnOpen()
+            : this.attachDetachEvent() === RdxPopoverAttachDetachEvent.DETACH && this.emitOnClosed();
     }
     /** @ignore */
-    hide() {
-        this.popoverContentDirective().hide();
+    canEmitOnOpenOrOnClosed() {
+        return (!this.cssAnimation() ||
+            (!this.cssOpeningAnimation() && this.state() === RdxPopoverState.OPEN) ||
+            (this.cssOpeningAnimation() &&
+                this.state() === RdxPopoverState.OPEN &&
+                this.cssAnimationStatus() === RdxPopoverAnimationStatus.OPEN_ENDED) ||
+            (!this.cssClosingAnimation() && this.state() === RdxPopoverState.CLOSED) ||
+            (this.cssClosingAnimation() &&
+                this.state() === RdxPopoverState.CLOSED &&
+                this.cssAnimationStatus() === RdxPopoverAnimationStatus.CLOSED_ENDED));
     }
     /** @ignore */
-    onIsOpenChangeEffect() {
+    onStateChangeEffect() {
+        let isFirst = true;
         effect(() => {
-            const isOpen = this.isOpen();
+            const state = this.state();
             untracked(() => {
-                if (isOpen) {
-                    this.show();
+                if (isFirst) {
+                    isFirst = false;
+                    return;
                 }
-                else {
-                    this.hide();
+                if (!this.ifOpenOrCloseWithoutAnimations(state)) {
+                    return;
                 }
+                this.openOrClose(state);
+            });
+        }, {});
+    }
+    /** @ignore */
+    onCssAnimationStatusChangeChangeEffect() {
+        let isFirst = true;
+        effect(() => {
+            const cssAnimationStatus = this.cssAnimationStatus();
+            untracked(() => {
+                if (isFirst) {
+                    isFirst = false;
+                    return;
+                }
+                if (!this.ifOpenOrCloseWithAnimations(cssAnimationStatus)) {
+                    return;
+                }
+                this.openOrClose(this.state());
+            });
+        });
+    }
+    /** @ignore */
+    emitOpenOrClosedEventEffect() {
+        let isFirst = true;
+        effect(() => {
+            this.attachDetachEvent();
+            this.cssAnimationStatus();
+            untracked(() => {
+                if (isFirst) {
+                    isFirst = false;
+                    return;
+                }
+                const canEmitOpenClose = untracked(() => this.canEmitOnOpenOrOnClosed());
+                if (!canEmitOpenClose) {
+                    return;
+                }
+                this.emitOnOpenOrOnClosed(this.state());
             });
         });
     }
     /** @ignore */
     onOpenChangeEffect() {
         effect(() => {
-            const currentOpen = this.open();
+            const open = this.open();
             untracked(() => {
-                this.isControlledExternally().set(currentOpen !== void 0);
-                if (this.isControlledExternally()()) {
-                    this.setOpen(currentOpen);
+                this.setState(open ? RdxPopoverState.OPEN : RdxPopoverState.CLOSED);
+            });
+        });
+    }
+    /** @ignore */
+    onIsFirstDefaultOpenChangeEffect() {
+        const effectRef = effect(() => {
+            const defaultOpen = this.defaultOpen();
+            untracked(() => {
+                if (!defaultOpen || this.open()) {
+                    effectRef.destroy();
+                    return;
                 }
+                this.handleOpen();
             });
         });
     }
     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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.11", type: RdxPopoverRootDirective, isStandalone: true, selector: "[rdxPopoverRoot]", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, externalControl: { classPropertyName: "externalControl", publicName: "externalControl", isSignal: true, isRequired: false, transformFunction: null }, cssAnimation: { classPropertyName: "cssAnimation", publicName: "cssAnimation", isSignal: true, isRequired: false, transformFunction: null }, cssOpeningAnimation: { classPropertyName: "cssOpeningAnimation", publicName: "cssOpeningAnimation", isSignal: true, isRequired: false, transformFunction: null }, cssClosingAnimation: { classPropertyName: "cssClosingAnimation", publicName: "cssClosingAnimation", isSignal: true, isRequired: false, transformFunction: null } }, 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 }, { propertyName: "popoverCloseDirective", first: true, predicate: RdxPopoverCloseToken, descendants: true, isSignal: true }, { propertyName: "popoverContentAttributesComponent", first: true, predicate: RdxPopoverContentAttributesToken, descendants: true, isSignal: true }, { propertyName: "internalPopoverAnchorDirective", first: true, predicate: RdxPopoverAnchorToken, 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,
+                    exportAs: 'rdxPopoverRoot'
+                }]
+        }], ctorParameters: () => [] });
+
+function injectPopoverRoot(optional = false) {
+    isDevMode() && assertInInjectionContext(injectPopoverRoot);
+    return inject(RdxPopoverRootDirective, { optional });
+}
+
+class RdxPopoverAnchorDirective {
+    constructor() {
+        /**
+         * @ignore
+         * If outside the root then null, otherwise the root directive - with optional `true` passed in as the first param.
+         * If outside the root and non-null value that means the html structure is wrong - popover inside popover.
+         * */
+        this.popoverRoot = injectPopoverRoot(true);
+        /** @ignore */
+        this.elementRef = inject(ElementRef);
+        /** @ignore */
+        this.overlayOrigin = inject(CdkOverlayOrigin);
+        /** @ignore */
+        this.document = inject(DOCUMENT);
+        /** @ignore */
+        this.name = computed(() => `rdx-popover-external-anchor-${this.popoverRoot?.uniqueId()}`);
+    }
+    /** @ignore */
+    click() {
+        this.emitOutsideClick();
+    }
+    /** @ignore */
+    setPopoverRoot(popoverRoot) {
+        this.popoverRoot = popoverRoot;
+    }
+    emitOutsideClick() {
+        const clickEvent = new MouseEvent('click', {
+            view: this.document.defaultView,
+            bubbles: true,
+            cancelable: true
+        });
+        this.document.body.dispatchEvent(clickEvent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverAnchorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: RdxPopoverAnchorDirective, isStandalone: true, selector: "[rdxPopoverAnchor]", host: { attributes: { "type": "button" }, listeners: { "click": "click()" }, properties: { "attr.id": "name()", "attr.aria-haspopup": "\"dialog\"" } }, providers: [
+            {
+                provide: RdxPopoverAnchorToken,
+                useExisting: forwardRef(() => RdxPopoverAnchorDirective)
+            }
+        ], exportAs: ["rdxPopoverAnchor"], hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverAnchorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPopoverAnchor]',
+                    standalone: true,
+                    exportAs: 'rdxPopoverAnchor',
+                    hostDirectives: [CdkOverlayOrigin],
+                    host: {
+                        type: 'button',
+                        '[attr.id]': 'name()',
+                        '[attr.aria-haspopup]': '"dialog"',
+                        '(click)': 'click()'
+                    },
                     providers: [
                         {
-                            provide: RdxPopoverRootToken,
-                            useExisting: forwardRef(() => RdxPopoverRootDirective)
+                            provide: RdxPopoverAnchorToken,
+                            useExisting: forwardRef(() => RdxPopoverAnchorDirective)
                         }
-                    ],
-                    exportAs: 'rdxPopoverRoot'
+                    ]
+                }]
+        }] });
+
+class RdxPopoverArrowDirective {
+    constructor() {
+        /** @ignore */
+        this.renderer = inject(Renderer2);
+        /** @ignore */
+        this.popoverRoot = injectPopoverRoot();
+        /** @ignore */
+        this.elementRef = inject(ElementRef);
+        /**
+         * @description The width of the arrow in pixels.
+         * @default 10
+         */
+        this.width = input(10);
+        /**
+         * @description The height of the arrow in pixels.
+         * @default 5
+         */
+        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');
+    }
+    setAnchorOrTriggerRect() {
+        this.anchorOrTriggerRect = (this.popoverRoot.popoverAnchorDirective() ?? this.popoverRoot.popoverTriggerDirective()).elementRef.nativeElement.getBoundingClientRect();
+    }
+    /** @ignore */
+    setPosition(position) {
+        this.setAnchorOrTriggerRect();
+        const posParams = getArrowPositionParams(getSideAndAlignFromAllPossibleConnectedPositions(position.connectionPair), { width: this.width(), height: this.height() }, { width: this.anchorOrTriggerRect.width, height: this.anchorOrTriggerRect.height });
+        this.renderer.setStyle(this.elementRef.nativeElement, 'top', posParams.top);
+        this.renderer.setStyle(this.elementRef.nativeElement, 'bottom', '');
+        this.renderer.setStyle(this.elementRef.nativeElement, 'left', posParams.left);
+        this.renderer.setStyle(this.elementRef.nativeElement, '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()" } }, providers: [
+            {
+                provide: RdxPopoverCloseToken,
+                useExisting: forwardRef(() => RdxPopoverCloseDirective)
+            }
+        ], 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()'
+                    },
+                    providers: [
+                        {
+                            provide: RdxPopoverCloseToken,
+                            useExisting: forwardRef(() => RdxPopoverCloseDirective)
+                        }
+                    ]
                 }]
         }], ctorParameters: () => [] });
 
+class RdxPopoverContentAttributesComponent {
+    constructor() {
+        /** @ignore */
+        this.popoverRoot = injectPopoverRoot();
+        /** @ignore */
+        this.name = computed(() => `rdx-popover-content-attributes-${this.popoverRoot.uniqueId()}`);
+        /** @ignore */
+        this.disableAnimation = computed(() => !this.canAnimate());
+    }
+    /** @ignore */
+    onAnimationStart(_) {
+        this.popoverRoot.cssAnimationStatus.set(this.popoverRoot.state() === RdxPopoverState.OPEN
+            ? RdxPopoverAnimationStatus.OPEN_STARTED
+            : RdxPopoverAnimationStatus.CLOSED_STARTED);
+    }
+    /** @ignore */
+    onAnimationEnd(_) {
+        this.popoverRoot.cssAnimationStatus.set(this.popoverRoot.state() === RdxPopoverState.OPEN
+            ? RdxPopoverAnimationStatus.OPEN_ENDED
+            : RdxPopoverAnimationStatus.CLOSED_ENDED);
+    }
+    /** @ignore */
+    canAnimate() {
+        return (this.popoverRoot.cssAnimation() &&
+            ((this.popoverRoot.cssOpeningAnimation() && this.popoverRoot.state() === RdxPopoverState.OPEN) ||
+                (this.popoverRoot.cssClosingAnimation() && this.popoverRoot.state() === RdxPopoverState.CLOSED)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverContentAttributesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: RdxPopoverContentAttributesComponent, isStandalone: true, selector: "[rdxPopoverContentAttributes]", host: { listeners: { "animationstart": "onAnimationStart($event)", "animationend": "onAnimationEnd($event)" }, properties: { "attr.role": "\"dialog\"", "attr.id": "name()", "attr.data-state": "popoverRoot.state()", "attr.data-side": "popoverRoot.popoverContentDirective().side()", "attr.data-align": "popoverRoot.popoverContentDirective().align()", "style": "disableAnimation() ? {animation: \"none !important\"} : null" } }, providers: [
+            {
+                provide: RdxPopoverContentAttributesToken,
+                useExisting: forwardRef(() => RdxPopoverContentAttributesComponent)
+            }
+        ], ngImport: i0, template: `
+        <ng-content />
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverContentAttributesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[rdxPopoverContentAttributes]',
+                    standalone: true,
+                    template: `
+        <ng-content />
+    `,
+                    host: {
+                        '[attr.role]': '"dialog"',
+                        '[attr.id]': 'name()',
+                        '[attr.data-state]': 'popoverRoot.state()',
+                        '[attr.data-side]': 'popoverRoot.popoverContentDirective().side()',
+                        '[attr.data-align]': 'popoverRoot.popoverContentDirective().align()',
+                        '[style]': 'disableAnimation() ? {animation: "none !important"} : null',
+                        '(animationstart)': 'onAnimationStart($event)',
+                        '(animationend)': 'onAnimationEnd($event)'
+                    },
+                    providers: [
+                        {
+                            provide: RdxPopoverContentAttributesToken,
+                            useExisting: forwardRef(() => RdxPopoverContentAttributesComponent)
+                        }
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
 const _imports = [
     RdxPopoverArrowDirective,
     RdxPopoverCloseDirective,
     RdxPopoverContentDirective,
     RdxPopoverTriggerDirective,
-    RdxPopoverRootDirective
+    RdxPopoverRootDirective,
+    RdxPopoverAnchorDirective,
+    RdxPopoverContentAttributesComponent
 ];
 class RdxPopoverModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -773,11 +1136,15 @@ class RdxPopoverModule {
             RdxPopoverCloseDirective,
             RdxPopoverContentDirective,
             RdxPopoverTriggerDirective,
-            RdxPopoverRootDirective], exports: [RdxPopoverArrowDirective,
+            RdxPopoverRootDirective,
+            RdxPopoverAnchorDirective,
+            RdxPopoverContentAttributesComponent], exports: [RdxPopoverArrowDirective,
             RdxPopoverCloseDirective,
             RdxPopoverContentDirective,
             RdxPopoverTriggerDirective,
-            RdxPopoverRootDirective] }); }
+            RdxPopoverRootDirective,
+            RdxPopoverAnchorDirective,
+            RdxPopoverContentAttributesComponent] }); }
     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: [{
@@ -792,5 +1159,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { RdxPopoverAlign, RdxPopoverArrowDirective, RdxPopoverCloseDirective, RdxPopoverContentDirective, RdxPopoverModule, RdxPopoverRootDirective, RdxPopoverSide, RdxPopoverTriggerDirective };
+export { RdxPopoverAlign, RdxPopoverAnchorDirective, RdxPopoverAnimationStatus, RdxPopoverArrowDirective, RdxPopoverAttachDetachEvent, RdxPopoverCloseDirective, RdxPopoverContentAttributesComponent, RdxPopoverContentDirective, RdxPopoverModule, RdxPopoverRootDirective, RdxPopoverSide, RdxPopoverState, RdxPopoverTriggerDirective };
 //# sourceMappingURL=radix-ng-primitives-popover.mjs.map