@radix-ng/primitives 0.50.0 → 1.0.0-beta.0

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

@@ -1,18 +1,18 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, contentChild, computed, DestroyRef, Injector, PLATFORM_ID, input, numberAttribute, booleanAttribute, output, forwardRef, resource, afterNextRender, EnvironmentInjector, effect, createComponent, inputBinding } from '@angular/core';
+import { inject, ElementRef, Directive, contentChild, signal, computed, InjectionToken, Injector, PLATFORM_ID, input, numberAttribute, booleanAttribute, output, forwardRef, resource, afterRenderEffect, afterNextRender, EnvironmentInjector, effect, createComponent, inputBinding } from '@angular/core';
 import { RdxArrow } from '@radix-ng/primitives/arrow';
 import { isPlatformBrowser } from '@angular/common';
-import { computePosition, offset, shift, flip, size, arrow, hide, limitShift, autoUpdate } from '@floating-ui/dom';
-import { createContext, elementSize } from '@radix-ng/primitives/core';
+import { computePosition, offset, shift, limitShift, flip, size, arrow, hide, autoUpdate } from '@floating-ui/dom';
+import { createContext, elementSize, watch } from '@radix-ng/primitives/core';
 
 class RdxPopperAnchor {
     constructor() {
         this.elementRef = inject(ElementRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopperAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxPopperAnchor, isStandalone: true, selector: "[rdxPopperAnchor]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopperAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopperAnchor, isStandalone: true, selector: "[rdxPopperAnchor]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopperAnchor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopperAnchor, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopperAnchor]'
@@ -21,17 +21,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
 
 class RdxPopper {
     constructor() {
-        this.anchor = contentChild.required(RdxPopperAnchor);
+        this.anchor = contentChild(RdxPopperAnchor, ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
+        this.anchorOverride = signal(undefined, ...(ngDevMode ? [{ debugName: "anchorOverride" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopper, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.3", type: RdxPopper, isStandalone: true, selector: "[rdxPopperRoot]", queries: [{ propertyName: "anchor", first: true, predicate: RdxPopperAnchor, descendants: true, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopper, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.9", type: RdxPopper, isStandalone: true, selector: "[rdxPopperRoot]", queries: [{ propertyName: "anchor", first: true, predicate: RdxPopperAnchor, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopper, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopperRoot]'
                 }]
-        }] });
+        }], propDecorators: { anchor: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RdxPopperAnchor), { isSignal: true }] }] } });
 
 class RdxPopperContent {
     constructor() {
@@ -42,12 +43,12 @@ class RdxPopperContent {
          */
         this.style = computed(() => ({
             animation: !this.popperContentWrapper.isPositioned() ? 'none' : undefined
-        }), ...(ngDevMode ? [{ debugName: "style" }] : []));
+        }), ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopperContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxPopperContent, isStandalone: true, selector: "[rdxPopperContent]", host: { properties: { "attr.data-side": "popperContentWrapper.placedSide()", "attr.data-align": "popperContentWrapper.placedAlign()", "style": "style()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopperContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopperContent, isStandalone: true, selector: "[rdxPopperContent]", host: { properties: { "attr.data-side": "popperContentWrapper.placedSide()", "attr.data-align": "popperContentWrapper.placedAlign()", "style": "style()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopperContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopperContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopperContent]',
@@ -59,6 +60,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 }]
         }] });
 
+const RdxPopperContentConfigToken = new InjectionToken('RdxPopperContentConfig', {
+    factory: () => ({})
+});
+function provideRdxPopperContentConfig(config) {
+    return { provide: RdxPopperContentConfigToken, useValue: config };
+}
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const SIDE_OPTIONS = ['top', 'right', 'bottom', 'left'];
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -115,77 +123,86 @@ const context = () => {
         arrowX: popperContentWrapper.arrowX,
         arrowY: popperContentWrapper.arrowY,
         shouldHideArrow: popperContentWrapper.shouldHideArrow,
-        isPositioned: popperContentWrapper.isPositioned
+        isPositioned: popperContentWrapper.isPositioned,
+        anchorHidden: popperContentWrapper.anchorHidden
     };
 };
 const [injectPopperContentWrapperContext, providePopperContentWrapperContext] = createContext('PopperContentWrapperContext');
 class RdxPopperContentWrapper {
     constructor() {
         this.elementRef = inject(ElementRef);
-        this.destroyRef = inject(DestroyRef);
         this.injector = inject(Injector);
         this.context = inject(RdxPopper);
         this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+        /** Optional positioning defaults provided by a composing primitive (e.g. tooltip). */
+        this.config = inject(RdxPopperContentConfigToken);
+        /**
+         * An element to position the popup against. Defaults to the popper anchor.
+         */
+        this.anchor = input(...(ngDevMode ? [undefined, { debugName: "anchor" }] : /* istanbul ignore next */ []));
         /**
          * The preferred side of the anchor to render against when open.
          * Will be reversed when collisions occur and avoidCollisions is enabled.
          */
-        this.side = input('bottom', ...(ngDevMode ? [{ debugName: "side" }] : []));
+        this.side = input(this.config.side ?? 'bottom', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
         /**
          * Distance between the anchor and the popup in pixels.
          */
-        this.sideOffset = input(0, ...(ngDevMode ? [{ debugName: "sideOffset", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.sideOffset = input(this.config.sideOffset ?? 0, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
          * How to align the popup relative to the specified side. May change when collisions occur.
          */
-        this.align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : []));
+        this.align = input(this.config.align ?? 'center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
         /** An offset in pixels from the `start` or `end` alignment options. */
-        this.alignOffset = input(0, ...(ngDevMode ? [{ debugName: "alignOffset", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.alignOffset = input(this.config.alignOffset ?? 0, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
          * Minimum distance to maintain between the arrow and the edges of the popup.
          * If your content has border-radius, this will prevent it from overflowing the corners.
          */
-        this.arrowPadding = input(0, ...(ngDevMode ? [{ debugName: "arrowPadding", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.arrowPadding = input(this.config.arrowPadding ?? 0, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /** When `true`, overrides the `side` and `align` preferences to prevent collisions with boundary edges. */
-        this.avoidCollisions = input(true, ...(ngDevMode ? [{ debugName: "avoidCollisions", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.avoidCollisions = input(this.config.avoidCollisions ?? true, { ...(ngDevMode ? { debugName: "avoidCollisions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * The element used as the collision boundary.
          * By default this is the viewport, though you can provide additional element(s) to be included in this check.
          */
-        this.collisionBoundary = input(...(ngDevMode ? [undefined, { debugName: "collisionBoundary" }] : []));
+        this.collisionBoundary = input(...(ngDevMode ? [undefined, { debugName: "collisionBoundary" }] : /* istanbul ignore next */ []));
         /**
          * The distance in pixels from the boundary edges where collision detection should occur.
          * Accepts a number (same for all sides), or a partial padding object, for example: `{ top: 20, left: 20 }`.
          */
-        this.collisionPadding = input(0, ...(ngDevMode ? [{ debugName: "collisionPadding" }] : []));
+        this.collisionPadding = input(this.config.collisionPadding ?? 0, ...(ngDevMode ? [{ debugName: "collisionPadding" }] : /* istanbul ignore next */ []));
         /**
          * The sticky behavior on the align axis. `partial` will keep the
          * content in the boundary as long as the trigger is at least partially
          * in the boundary whilst "always" will keep the content in the boundary
          * regardless.
          */
-        this.sticky = input('partial', ...(ngDevMode ? [{ debugName: "sticky" }] : []));
+        this.sticky = input(this.config.sticky ?? 'partial', ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
         /**
          * Whether to hide the content when the trigger becomes fully occluded.
          */
-        this.hideWhenDetached = input(false, ...(ngDevMode ? [{ debugName: "hideWhenDetached", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.hideWhenDetached = input(this.config.hideWhenDetached ?? false, { ...(ngDevMode ? { debugName: "hideWhenDetached" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          *  The type of CSS position property to use.
          */
-        this.positionStrategy = input('fixed', ...(ngDevMode ? [{ debugName: "positionStrategy" }] : []));
+        this.positionStrategy = input(this.config.positionStrategy ?? 'fixed', ...(ngDevMode ? [{ debugName: "positionStrategy" }] : /* istanbul ignore next */ []));
         /**
          * Strategy to update the position of the floating element on every animation frame.
          */
-        this.updatePositionStrategy = input('always', ...(ngDevMode ? [{ debugName: "updatePositionStrategy" }] : []));
+        this.updatePositionStrategy = input(this.config.updatePositionStrategy ?? 'optimized', ...(ngDevMode ? [{ debugName: "updatePositionStrategy" }] : /* istanbul ignore next */ []));
         /**
          * Emits when the element is placed.
          */
         this.placed = output();
-        this.arrow = contentChild(forwardRef(() => RdxPopperArrow), ...(ngDevMode ? [{ debugName: "arrow" }] : []));
-        this.shouldHideArrow = computed(() => this.position.value()?.middlewareData['arrow']?.centerOffset !== 0, ...(ngDevMode ? [{ debugName: "shouldHideArrow" }] : []));
-        this.arrowX = computed(() => this.position.value()?.middlewareData['arrow']?.x, ...(ngDevMode ? [{ debugName: "arrowX" }] : []));
-        this.arrowY = computed(() => this.position.value()?.middlewareData['arrow']?.y, ...(ngDevMode ? [{ debugName: "arrowY" }] : []));
-        this.desiredPlacement = computed(() => (this.side() + (this.align() !== 'center' ? '-' + this.align() : '')), ...(ngDevMode ? [{ debugName: "desiredPlacement" }] : []));
+        this.arrow = contentChild(forwardRef(() => RdxPopperArrow), ...(ngDevMode ? [{ debugName: "arrow" }] : /* istanbul ignore next */ []));
+        this.shouldHideArrow = computed(() => this.position.value()?.middlewareData['arrow']?.centerOffset !== 0, ...(ngDevMode ? [{ debugName: "shouldHideArrow" }] : /* istanbul ignore next */ []));
+        /** Whether the arrow could not be centered on the anchor because the popup was shifted. */
+        this.arrowUncentered = computed(() => (this.position.value()?.middlewareData['arrow']?.centerOffset ?? 0) !== 0, ...(ngDevMode ? [{ debugName: "arrowUncentered" }] : /* istanbul ignore next */ []));
+        this.arrowX = computed(() => this.position.value()?.middlewareData['arrow']?.x, ...(ngDevMode ? [{ debugName: "arrowX" }] : /* istanbul ignore next */ []));
+        this.arrowY = computed(() => this.position.value()?.middlewareData['arrow']?.y, ...(ngDevMode ? [{ debugName: "arrowY" }] : /* istanbul ignore next */ []));
+        this.anchorHidden = computed(() => this.position.value()?.middlewareData.hide?.referenceHidden === true, ...(ngDevMode ? [{ debugName: "anchorHidden" }] : /* istanbul ignore next */ []));
+        this.desiredPlacement = computed(() => (this.side() + (this.align() !== 'center' ? '-' + this.align() : '')), ...(ngDevMode ? [{ debugName: "desiredPlacement" }] : /* istanbul ignore next */ []));
         this.arrowSize = computed(() => {
             const arrowElementRef = this.arrow()?.elementRef;
             if (!arrowElementRef) {
@@ -198,7 +215,7 @@ class RdxPopperContentWrapper {
                 elementRef: arrowElementRef,
                 injector: this.injector
             });
-        }, ...(ngDevMode ? [{ debugName: "arrowSize" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "arrowSize" }] : /* istanbul ignore next */ []));
         this.boundary = computed(() => {
             const boundary = this.collisionBoundary();
             if (Array.isArray(boundary)) {
@@ -208,34 +225,63 @@ class RdxPopperContentWrapper {
                 return [];
             }
             return [boundary.nativeElement];
-        }, ...(ngDevMode ? [{ debugName: "boundary" }] : []));
-        this.hasExplicitBoundaries = computed(() => this.boundary().length > 0, ...(ngDevMode ? [{ debugName: "hasExplicitBoundaries" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "boundary" }] : /* istanbul ignore next */ []));
+        this.hasExplicitBoundaries = computed(() => this.boundary().length > 0, ...(ngDevMode ? [{ debugName: "hasExplicitBoundaries" }] : /* istanbul ignore next */ []));
         this.detectOverflowOptions = computed(() => ({
             padding: this.collisionPadding(),
             boundary: this.boundary().filter(isNotNull),
             // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
             altBoundary: this.hasExplicitBoundaries()
-        }), ...(ngDevMode ? [{ debugName: "detectOverflowOptions" }] : []));
-        this.position = resource({
-            loader: () => computePosition(this.context.anchor().elementRef.nativeElement, this.elementRef.nativeElement, {
-                // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
+        }), ...(ngDevMode ? [{ debugName: "detectOverflowOptions" }] : /* istanbul ignore next */ []));
+        this.resolvedAnchor = computed(() => {
+            const anchor = this.anchor();
+            const resolvedAnchor = typeof anchor === 'function' ? anchor() : anchor;
+            if (resolvedAnchor instanceof ElementRef) {
+                return resolvedAnchor.nativeElement;
+            }
+            if (resolvedAnchor) {
+                return resolvedAnchor;
+            }
+            const fallbackAnchor = this.context.anchorOverride() ?? this.context.anchor()?.elementRef.nativeElement;
+            if (!fallbackAnchor) {
+                throw new Error('RdxPopperContentWrapper requires an anchor.');
+            }
+            return fallbackAnchor;
+        }, ...(ngDevMode ? [{ debugName: "resolvedAnchor" }] : /* istanbul ignore next */ []));
+        this.position = resource({ ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), params: () => ({
+                anchor: this.resolvedAnchor(),
                 strategy: this.positionStrategy(),
                 placement: this.desiredPlacement(),
+                sideOffset: this.sideOffset(),
+                alignOffset: this.alignOffset(),
+                arrowHeight: this.arrowSize()().height,
+                arrowWidth: this.arrowSize()().width,
+                avoidCollisions: this.avoidCollisions(),
+                sticky: this.sticky(),
+                detectOverflowOptions: this.detectOverflowOptions(),
+                arrow: this.arrow(),
+                arrowPadding: this.arrowPadding(),
+                hideWhenDetached: this.hideWhenDetached()
+            }),
+            loader: ({ params }) => computePosition(params.anchor, this.elementRef.nativeElement, {
+                // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
+                strategy: params.strategy,
+                placement: params.placement,
                 middleware: [
                     offset({
-                        mainAxis: this.sideOffset() + this.arrowSize()().height || 0,
-                        alignmentAxis: this.alignOffset()
+                        mainAxis: params.sideOffset + params.arrowHeight || 0,
+                        alignmentAxis: params.alignOffset
                     }),
-                    this.avoidCollisions() &&
+                    params.avoidCollisions &&
                         shift({
                             mainAxis: true,
                             crossAxis: false,
-                            limiter: this.sticky() === 'partial' ? limitShift() : undefined,
-                            ...this.detectOverflowOptions()
+                            limiter: params.sticky === 'partial' ? limitShift() : undefined,
+                            ...params.detectOverflowOptions
                         }),
-                    this.avoidCollisions() && flip({ ...this.detectOverflowOptions() }),
+                    params.avoidCollisions && flip({ ...params.detectOverflowOptions }),
                     size({
-                        ...this.detectOverflowOptions(),
+                        ...params.detectOverflowOptions,
                         apply: ({ elements, rects, availableWidth, availableHeight }) => {
                             const { width: anchorWidth, height: anchorHeight } = rects.reference;
                             const contentStyle = elements.floating.style;
@@ -245,27 +291,26 @@ class RdxPopperContentWrapper {
                             contentStyle.setProperty('--radix-popper-anchor-height', `${anchorHeight}px`);
                         }
                     }),
-                    this.arrow() &&
+                    params.arrow &&
                         arrow({
-                            element: this.arrow().elementRef.nativeElement,
-                            padding: this.arrowPadding()
+                            element: params.arrow.elementRef.nativeElement,
+                            padding: params.arrowPadding
                         }),
                     transformOrigin({
-                        arrowWidth: this.arrowSize()().width,
-                        arrowHeight: this.arrowSize()().height
+                        arrowWidth: params.arrowWidth,
+                        arrowHeight: params.arrowHeight
                     }),
-                    this.hideWhenDetached() &&
+                    params.hideWhenDetached &&
                         hide({
                             strategy: 'referenceHidden',
-                            ...this.detectOverflowOptions()
+                            ...params.detectOverflowOptions
                         })
                 ]
-            })
-        });
+            }) });
         /**
          * Whether the panel is positioned.
          */
-        this.isPositioned = computed(() => this.position.hasValue(), ...(ngDevMode ? [{ debugName: "isPositioned" }] : []));
+        this.isPositioned = computed(() => this.position.hasValue(), ...(ngDevMode ? [{ debugName: "isPositioned" }] : /* istanbul ignore next */ []));
         /**
          * The current placement of the panel.
          */
@@ -279,15 +324,15 @@ class RdxPopperContentWrapper {
                 side: side,
                 align: align
             };
-        }, ...(ngDevMode ? [{ debugName: "placement" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
         /**
          * The side the panel is currently placed against.
          */
-        this.placedSide = computed(() => this.placement()?.side, ...(ngDevMode ? [{ debugName: "placedSide" }] : []));
+        this.placedSide = computed(() => this.placement()?.side, ...(ngDevMode ? [{ debugName: "placedSide" }] : /* istanbul ignore next */ []));
         /**
          * The current alignment of the panel.
          */
-        this.placedAlign = computed(() => this.placement()?.align, ...(ngDevMode ? [{ debugName: "placedAlign" }] : []));
+        this.placedAlign = computed(() => this.placement()?.align, ...(ngDevMode ? [{ debugName: "placedAlign" }] : /* istanbul ignore next */ []));
         this.contentElementRef = contentChild.required(RdxPopperContent, {
             read: ElementRef
         });
@@ -296,7 +341,7 @@ class RdxPopperContentWrapper {
                 return 0;
             }
             return getComputedStyle(this.contentElementRef().nativeElement).zIndex;
-        }, ...(ngDevMode ? [{ debugName: "contentZIndex" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "contentZIndex" }] : /* istanbul ignore next */ []));
         this.style = computed(() => {
             const pos = this.position.value();
             const x = pos?.x;
@@ -313,6 +358,8 @@ class RdxPopperContentWrapper {
                     pos?.middlewareData['transformOrigin']?.x,
                     pos?.middlewareData['transformOrigin']?.y
                 ].join(' '),
+                '--radix-popper-content-wrapper-width': `${this.elementRef.nativeElement.offsetWidth}px`,
+                '--radix-popper-content-wrapper-height': `${this.elementRef.nativeElement.offsetHeight}px`,
                 visibility: ready ? 'visible' : 'hidden',
                 pointerEvents: ready ? 'auto' : 'none',
                 // hide the content if using the hide middleware and should be hidden
@@ -323,21 +370,27 @@ class RdxPopperContentWrapper {
                     pointerEvents: 'none'
                 })
             };
-        }, ...(ngDevMode ? [{ debugName: "style" }] : []));
-        this.afterNextRender = afterNextRender(() => {
+        }, ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+        this.afterRenderEffect = afterRenderEffect((onCleanup) => {
             this.position.reload();
-            const cleanup = autoUpdate(this.context.anchor().elementRef.nativeElement, this.elementRef.nativeElement, () => this.position.reload(), {
+            const cleanup = autoUpdate(this.resolvedAnchor(), this.elementRef.nativeElement, () => this.position.reload(), {
                 animationFrame: this.updatePositionStrategy() === 'always'
             });
-            this.destroyRef.onDestroy(() => {
-                cleanup();
-            });
+            onCleanup(cleanup);
+        });
+        watch([this.isPositioned], ([isPositioned]) => {
+            if (!isPositioned) {
+                return;
+            }
+            afterNextRender(() => {
+                this.placed.emit();
+            }, { injector: this.injector });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopperContentWrapper, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.3", type: RdxPopperContentWrapper, isStandalone: true, selector: "[rdxPopperContentWrapper]", 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 }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, collisionBoundary: { classPropertyName: "collisionBoundary", publicName: "collisionBoundary", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, positionStrategy: { classPropertyName: "positionStrategy", publicName: "positionStrategy", isSignal: true, isRequired: false, transformFunction: null }, updatePositionStrategy: { classPropertyName: "updatePositionStrategy", publicName: "updatePositionStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { placed: "placed" }, host: { attributes: { "data-radix-popper-content-wrapper": "" }, properties: { "style": "style()" } }, providers: [providePopperContentWrapperContext(context)], queries: [{ propertyName: "arrow", first: true, predicate: i0.forwardRef(() => RdxPopperArrow), descendants: true, isSignal: true }, { propertyName: "contentElementRef", first: true, predicate: RdxPopperContent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopperContentWrapper, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.9", type: RdxPopperContentWrapper, isStandalone: true, selector: "[rdxPopperContentWrapper]", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, 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 }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, collisionBoundary: { classPropertyName: "collisionBoundary", publicName: "collisionBoundary", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, positionStrategy: { classPropertyName: "positionStrategy", publicName: "positionStrategy", isSignal: true, isRequired: false, transformFunction: null }, updatePositionStrategy: { classPropertyName: "updatePositionStrategy", publicName: "updatePositionStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { placed: "placed" }, host: { attributes: { "data-radix-popper-content-wrapper": "" }, properties: { "style": "style()" } }, providers: [providePopperContentWrapperContext(context)], queries: [{ propertyName: "arrow", first: true, predicate: i0.forwardRef(() => RdxPopperArrow), descendants: true, isSignal: true }, { propertyName: "contentElementRef", first: true, predicate: RdxPopperContent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopperContentWrapper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopperContentWrapper, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopperContentWrapper]',
@@ -347,7 +400,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         '[style]': 'style()'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], avoidCollisions: [{ type: i0.Input, args: [{ isSignal: true, alias: "avoidCollisions", required: false }] }], collisionBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionBoundary", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], positionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionStrategy", required: false }] }], updatePositionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "updatePositionStrategy", required: false }] }], placed: [{ type: i0.Output, args: ["placed"] }], arrow: [{ type: i0.ContentChild, args: [forwardRef(() => RdxPopperArrow), { isSignal: true }] }], contentElementRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RdxPopperContent), { ...{
+                            read: ElementRef
+                        }, isSignal: true }] }] } });
 
 const OPPOSITE_SIDE = {
     top: 'bottom',
@@ -360,9 +415,9 @@ class RdxPopperArrow {
         this.popperContentContext = injectPopperContentWrapperContext();
         this.environmentInjector = inject(EnvironmentInjector);
         this.elementRef = inject(ElementRef);
-        this.width = input(10, ...(ngDevMode ? [{ debugName: "width", transform: numberAttribute }] : [{ transform: numberAttribute }]));
-        this.height = input(5, ...(ngDevMode ? [{ debugName: "height", transform: numberAttribute }] : [{ transform: numberAttribute }]));
-        this.baseSide = computed(() => OPPOSITE_SIDE[this.popperContentContext.placedSide()], ...(ngDevMode ? [{ debugName: "baseSide" }] : []));
+        this.width = input(10, { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.height = input(5, { ...(ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.baseSide = computed(() => OPPOSITE_SIDE[this.popperContentContext.placedSide()], ...(ngDevMode ? [{ debugName: "baseSide" }] : /* istanbul ignore next */ []));
         this.style = computed(() => {
             return {
                 position: 'absolute',
@@ -383,7 +438,7 @@ class RdxPopperArrow {
                 }[this.popperContentContext.placedSide()],
                 visibility: this.popperContentContext.shouldHideArrow() ? 'hidden' : undefined
             };
-        }, ...(ngDevMode ? [{ debugName: "style" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
         this.onCleanup = effect((onCleanup) => {
             const component = createComponent(RdxArrow, {
                 environmentInjector: this.environmentInjector,
@@ -393,12 +448,12 @@ class RdxPopperArrow {
             });
             component.changeDetectorRef.detectChanges();
             onCleanup(() => component.destroy());
-        }, ...(ngDevMode ? [{ debugName: "onCleanup" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "onCleanup" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopperArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxPopperArrow, isStandalone: true, selector: "[rdxPopperArrow]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "style()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopperArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPopperArrow, isStandalone: true, selector: "[rdxPopperArrow]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "style()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopperArrow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopperArrow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopperArrow]',
@@ -406,7 +461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         '[style]': 'style()'
                     }
                 }]
-        }] });
+        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
 
 const popperImports = [RdxPopper, RdxPopperArrow, RdxPopperContentWrapper, RdxPopperContent, RdxPopperAnchor];
 
@@ -414,5 +469,5 @@ const popperImports = [RdxPopper, RdxPopperArrow, RdxPopperContentWrapper, RdxPo
  * Generated bundle index. Do not edit.
  */
 
-export { RdxPopper, RdxPopperAnchor, RdxPopperArrow, RdxPopperContent, RdxPopperContentWrapper, getSideAndAlignFromPlacement, injectPopperContentWrapperContext, isNotNull, popperImports, providePopperContentWrapperContext, transformOrigin };
+export { RdxPopper, RdxPopperAnchor, RdxPopperArrow, RdxPopperContent, RdxPopperContentConfigToken, RdxPopperContentWrapper, getSideAndAlignFromPlacement, injectPopperContentWrapperContext, isNotNull, popperImports, providePopperContentWrapperContext, provideRdxPopperContentConfig, transformOrigin };
 //# sourceMappingURL=radix-ng-primitives-popper.mjs.map