@radix-ng/primitives 0.44.0 → 0.51.0

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

@@ -3,16 +3,16 @@ import { inject, ElementRef, Directive, contentChild, computed, DestroyRef, Inje
 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 { 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]'
@@ -23,15 +23,15 @@ class RdxPopper {
     constructor() {
         this.anchor = contentChild.required(RdxPopperAnchor);
     }
-    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 +42,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]',
@@ -130,62 +130,62 @@ class RdxPopperContentWrapper {
          * 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('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(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('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(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(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(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(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('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(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('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('always', ...(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 */ []));
+        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.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 +198,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,16 +208,15 @@ 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, {
+        }), ...(ngDevMode ? [{ debugName: "detectOverflowOptions" }] : /* istanbul ignore next */ []));
+        this.position = resource({ ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), 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
                 strategy: this.positionStrategy(),
                 placement: this.desiredPlacement(),
@@ -260,12 +259,11 @@ class RdxPopperContentWrapper {
                             ...this.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 +277,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 +294,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;
@@ -323,7 +321,7 @@ class RdxPopperContentWrapper {
                     pointerEvents: 'none'
                 })
             };
-        }, ...(ngDevMode ? [{ debugName: "style" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
         this.afterNextRender = afterNextRender(() => {
             this.position.reload();
             const cleanup = autoUpdate(this.context.anchor().elementRef.nativeElement, this.elementRef.nativeElement, () => this.position.reload(), {
@@ -333,11 +331,16 @@ class RdxPopperContentWrapper {
                 cleanup();
             });
         });
+        watch([this.isPositioned], () => {
+            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: { 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 +350,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         '[style]': 'style()'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { 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 +365,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 +388,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 +398,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 +411,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];