@radix-ng/primitives 0.24.0 → 0.26.0

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

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, TemplateRef, DestroyRef, computed, input, output, effect, untracked, SimpleChange, Directive, ElementRef, NgZone, Renderer2, isDevMode, VERSION, Injectable, makeEnvironmentProviders, signal, booleanAttribute, contentChild, ViewContainerRef, afterNextRender, assertInInjectionContext, forwardRef, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { InjectionToken, inject, TemplateRef, DestroyRef, computed, input, numberAttribute, booleanAttribute, output, effect, untracked, SimpleChange, Directive, ElementRef, NgZone, Renderer2, isDevMode, VERSION, Injectable, makeEnvironmentProviders, signal, contentChild, ViewContainerRef, afterNextRender, assertInInjectionContext, forwardRef, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i1 from '@angular/cdk/overlay';
 import { Overlay, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
-import { DOCUMENT } from '@angular/common';
+import { RdxPositionSide, RdxPositionAlign, RDX_POSITIONING_DEFAULTS, getContentPosition, getAllPossibleConnectedPositions, injectDocument, injectWindow, getArrowPositionParams, getSideAndAlignFromAllPossibleConnectedPositions } from '@radix-ng/primitives/core';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { filter, tap } from 'rxjs';
 
@@ -14,19 +14,6 @@ const RdxPopoverCloseToken = new InjectionToken('RdxPopoverCloseToken');
 
 const RdxPopoverContentAttributesToken = new InjectionToken('RdxPopoverContentAttributesToken');
 
-var RdxPopoverSide;
-(function (RdxPopoverSide) {
-    RdxPopoverSide["Top"] = "top";
-    RdxPopoverSide["Right"] = "right";
-    RdxPopoverSide["Bottom"] = "bottom";
-    RdxPopoverSide["Left"] = "left";
-})(RdxPopoverSide || (RdxPopoverSide = {}));
-var RdxPopoverAlign;
-(function (RdxPopoverAlign) {
-    RdxPopoverAlign["Start"] = "start";
-    RdxPopoverAlign["Center"] = "center";
-    RdxPopoverAlign["End"] = "end";
-})(RdxPopoverAlign || (RdxPopoverAlign = {}));
 var RdxPopoverState;
 (function (RdxPopoverState) {
     RdxPopoverState["OPEN"] = "open";
@@ -45,200 +32,6 @@ var RdxPopoverAnimationStatus;
     RdxPopoverAnimationStatus["CLOSED_ENDED"] = "closed_ended";
 })(RdxPopoverAnimationStatus || (RdxPopoverAnimationStatus = {}));
 
-const POPOVER_POSITIONS = {
-    [RdxPopoverSide.Top]: {
-        [RdxPopoverAlign.Center]: {
-            originX: 'center',
-            originY: 'top',
-            overlayX: 'center',
-            overlayY: 'bottom'
-        },
-        [RdxPopoverAlign.Start]: {
-            originX: 'start',
-            originY: 'top',
-            overlayX: 'start',
-            overlayY: 'bottom'
-        },
-        [RdxPopoverAlign.End]: {
-            originX: 'end',
-            originY: 'top',
-            overlayX: 'end',
-            overlayY: 'bottom'
-        }
-    },
-    [RdxPopoverSide.Right]: {
-        [RdxPopoverAlign.Center]: {
-            originX: 'end',
-            originY: 'center',
-            overlayX: 'start',
-            overlayY: 'center'
-        },
-        [RdxPopoverAlign.Start]: {
-            originX: 'end',
-            originY: 'top',
-            overlayX: 'start',
-            overlayY: 'top'
-        },
-        [RdxPopoverAlign.End]: {
-            originX: 'end',
-            originY: 'bottom',
-            overlayX: 'start',
-            overlayY: 'bottom'
-        }
-    },
-    [RdxPopoverSide.Bottom]: {
-        [RdxPopoverAlign.Center]: {
-            originX: 'center',
-            originY: 'bottom',
-            overlayX: 'center',
-            overlayY: 'top'
-        },
-        [RdxPopoverAlign.Start]: {
-            originX: 'start',
-            originY: 'bottom',
-            overlayX: 'start',
-            overlayY: 'top'
-        },
-        [RdxPopoverAlign.End]: {
-            originX: 'end',
-            originY: 'bottom',
-            overlayX: 'end',
-            overlayY: 'top'
-        }
-    },
-    [RdxPopoverSide.Left]: {
-        [RdxPopoverAlign.Center]: {
-            originX: 'start',
-            originY: 'center',
-            overlayX: 'end',
-            overlayY: 'center'
-        },
-        [RdxPopoverAlign.Start]: {
-            originX: 'start',
-            originY: 'top',
-            overlayX: 'end',
-            overlayY: 'top'
-        },
-        [RdxPopoverAlign.End]: {
-            originX: 'start',
-            originY: 'bottom',
-            overlayX: 'end',
-            overlayY: 'bottom'
-        }
-    }
-};
-const DEFAULTS = {
-    offsets: {
-        side: 10,
-        align: 0
-    }
-};
-
-let allPossibleConnectedPositions;
-function getAllPossibleConnectedPositions() {
-    if (!allPossibleConnectedPositions) {
-        allPossibleConnectedPositions = new Map();
-    }
-    if (allPossibleConnectedPositions.size < 1) {
-        Object.keys(POPOVER_POSITIONS).forEach((side) => {
-            Object.keys(POPOVER_POSITIONS[side] ?? {}).forEach((align) => {
-                allPossibleConnectedPositions.set(`${side}|${align}`, POPOVER_POSITIONS[side][align]);
-            });
-        });
-    }
-    return allPossibleConnectedPositions;
-}
-function getSideAndAlignFromAllPossibleConnectedPositions(position) {
-    const allPossibleConnectedPositions = getAllPossibleConnectedPositions();
-    let sideAndAlign;
-    allPossibleConnectedPositions.forEach((value, key) => {
-        if (position.originX === value.originX &&
-            position.originY === value.originY &&
-            position.overlayX === value.overlayX &&
-            position.overlayY === value.overlayY) {
-            const sideAndAlignArray = key.split('|');
-            sideAndAlign = {
-                side: sideAndAlignArray[0],
-                align: sideAndAlignArray[1]
-            };
-        }
-    });
-    if (!sideAndAlign) {
-        throw Error(`[RdxPopover] cannot infer both side and align from the given position (${JSON.stringify(position)})`);
-    }
-    return sideAndAlign;
-}
-function getContentPosition(sideAndAlignWithOffsets) {
-    const { side, align, sideOffset, alignOffset } = sideAndAlignWithOffsets;
-    const position = {
-        ...(POPOVER_POSITIONS[side]?.[align] ?? POPOVER_POSITIONS[RdxPopoverSide.Top][RdxPopoverAlign.Center])
-    };
-    if (sideOffset || alignOffset) {
-        if ([RdxPopoverSide.Top, RdxPopoverSide.Bottom].includes(side)) {
-            if (sideOffset) {
-                position.offsetY = side === RdxPopoverSide.Top ? -sideOffset : sideOffset;
-            }
-            if (alignOffset) {
-                position.offsetX = alignOffset;
-            }
-        }
-        else {
-            if (sideOffset) {
-                position.offsetX = side === RdxPopoverSide.Left ? -sideOffset : sideOffset;
-            }
-            if (alignOffset) {
-                position.offsetY = alignOffset;
-            }
-        }
-    }
-    return position;
-}
-function getArrowPositionParams(sideAndAlign, arrowWidthAndHeight, triggerWidthAndHeight) {
-    const posParams = {
-        top: '',
-        left: '',
-        transform: ''
-    };
-    if ([RdxPopoverSide.Top, RdxPopoverSide.Bottom].includes(sideAndAlign.side)) {
-        if (sideAndAlign.side === RdxPopoverSide.Top) {
-            posParams.top = '100%';
-        }
-        else {
-            posParams.top = `-${arrowWidthAndHeight.height}px`;
-            posParams.transform = `rotate(180deg)`;
-        }
-        if (sideAndAlign.align === RdxPopoverAlign.Start) {
-            posParams.left = `${(triggerWidthAndHeight.width - arrowWidthAndHeight.width) / 2}px`;
-        }
-        else if (sideAndAlign.align === RdxPopoverAlign.Center) {
-            posParams.left = `calc(50% - ${arrowWidthAndHeight.width / 2}px)`;
-        }
-        else if (sideAndAlign.align === RdxPopoverAlign.End) {
-            posParams.left = `calc(100% - ${(triggerWidthAndHeight.width + arrowWidthAndHeight.width) / 2}px)`;
-        }
-    }
-    else if ([RdxPopoverSide.Left, RdxPopoverSide.Right].includes(sideAndAlign.side)) {
-        if (sideAndAlign.side === RdxPopoverSide.Left) {
-            posParams.left = `100%`;
-            posParams.transform = `rotate(-90deg) translate(0, -50%)`;
-        }
-        else {
-            posParams.left = `-${arrowWidthAndHeight.width}px`;
-            posParams.transform = `rotate(90deg) translate(0, -50%)`;
-        }
-        if (sideAndAlign.align === RdxPopoverAlign.Start) {
-            posParams.top = `${(triggerWidthAndHeight.height - arrowWidthAndHeight.height) / 2}px`;
-        }
-        else if (sideAndAlign.align === RdxPopoverAlign.Center) {
-            posParams.top = `calc(50% - ${arrowWidthAndHeight.height / 2}px)`;
-        }
-        else if (sideAndAlign.align === RdxPopoverAlign.End) {
-            posParams.top = `calc(100% - ${(triggerWidthAndHeight.height + arrowWidthAndHeight.height) / 2}px)`;
-        }
-    }
-    return posParams;
-}
-
 class RdxPopoverContentDirective {
     constructor() {
         /** @ignore */
@@ -257,31 +50,35 @@ class RdxPopoverContentDirective {
          * @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);
+        this.side = input(RdxPositionSide.Top);
         /**
          * @description The distance in pixels from the trigger.
          * @default undefined
          */
-        this.sideOffset = input(void 0);
+        this.sideOffset = input(NaN, {
+            transform: numberAttribute
+        });
         /**
          * @description The preferred alignment against the trigger. May change when collisions occur.
          * @default center
          */
-        this.align = input(RdxPopoverAlign.Center);
+        this.align = input(RdxPositionAlign.Center);
         /**
          * @description An offset in pixels from the "start" or "end" alignment options.
          * @default undefined
          */
-        this.alignOffset = input(void 0);
+        this.alignOffset = input(NaN, {
+            transform: numberAttribute
+        });
         /**
          * @description Whether to add some alternate positions of the content.
          * @default false
          */
-        this.alternatePositionsDisabled = input(false);
+        this.alternatePositionsDisabled = input(false, { transform: booleanAttribute });
         /** @description Whether to prevent `onOverlayEscapeKeyDown` handler from calling. */
-        this.onOverlayEscapeKeyDownDisabled = input(false);
+        this.onOverlayEscapeKeyDownDisabled = input(false, { transform: booleanAttribute });
         /** @description Whether to prevent `onOverlayOutsideClick` handler from calling. */
-        this.onOverlayOutsideClickDisabled = input(false);
+        this.onOverlayOutsideClickDisabled = input(false, { transform: booleanAttribute });
         /**
          * @description Event handler called when the escape key is down.
          * It can be prevented by setting `onOverlayEscapeKeyDownDisabled` input to `true`.
@@ -428,10 +225,12 @@ class RdxPopoverContentDirective {
     }
     /** @ignore */
     computePositions() {
-        const greatestDimensionFromTheArrow = Math.max(this.popoverRoot.popoverArrowDirective()?.width() ?? 0, this.popoverRoot.popoverArrowDirective()?.height() ?? 0);
+        const arrowHeight = this.popoverRoot.popoverArrowDirective()?.height() ?? 0;
         const offsets = {
-            sideOffset: this.sideOffset() ?? (greatestDimensionFromTheArrow || DEFAULTS.offsets.side),
-            alignOffset: this.alignOffset() ?? DEFAULTS.offsets.align
+            sideOffset: isNaN(this.sideOffset())
+                ? arrowHeight || RDX_POSITIONING_DEFAULTS.offsets.side
+                : this.sideOffset(),
+            alignOffset: isNaN(this.alignOffset()) ? RDX_POSITIONING_DEFAULTS.offsets.align : this.alignOffset()
         };
         const basePosition = getContentPosition({
             side: this.side(),
@@ -485,14 +284,13 @@ class RdxPopoverContentDirective {
             [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 }, alternatePositionsDisabled: { classPropertyName: "alternatePositionsDisabled", publicName: "alternatePositionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, onOverlayEscapeKeyDownDisabled: { classPropertyName: "onOverlayEscapeKeyDownDisabled", publicName: "onOverlayEscapeKeyDownDisabled", isSignal: true, isRequired: false, transformFunction: null }, onOverlayOutsideClickDisabled: { classPropertyName: "onOverlayOutsideClickDisabled", publicName: "onOverlayOutsideClickDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOverlayEscapeKeyDown: "onOverlayEscapeKeyDown", onOverlayOutsideClick: "onOverlayOutsideClick", onOpen: "onOpen", onClosed: "onClosed" }, hostDirectives: [{ directive: i1.CdkConnectedOverlay }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", 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 }, alternatePositionsDisabled: { classPropertyName: "alternatePositionsDisabled", publicName: "alternatePositionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, onOverlayEscapeKeyDownDisabled: { classPropertyName: "onOverlayEscapeKeyDownDisabled", publicName: "onOverlayEscapeKeyDownDisabled", isSignal: true, isRequired: false, transformFunction: null }, onOverlayOutsideClickDisabled: { classPropertyName: "onOverlayOutsideClickDisabled", publicName: "onOverlayOutsideClickDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOverlayEscapeKeyDown: "onOverlayEscapeKeyDown", onOverlayOutsideClick: "onOverlayOutsideClick", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverContent]',
-                    standalone: true,
                     hostDirectives: [
                         CdkConnectedOverlay
                     ]
@@ -514,14 +312,13 @@ class RdxPopoverTriggerDirective {
     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: "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverTrigger]',
-                    standalone: true,
                     hostDirectives: [CdkOverlayOrigin],
                     host: {
                         type: 'button',
@@ -543,11 +340,12 @@ function eventTypeAsPrimitiveConfigKey(eventType) {
 class RdxCdkEventService {
     #clickDomRootEventCallbacks;
     constructor() {
-        this.document = inject(DOCUMENT);
+        this.document = injectDocument();
         this.destroyRef = inject(DestroyRef);
         this.ngZone = inject(NgZone);
         this.renderer2 = inject(Renderer2);
-        this.onDestroyCallbacks = new Set([deleteRdxCdkEventServiceWindowKey]);
+        this.window = injectWindow();
+        this.onDestroyCallbacks = new Set([() => deleteRdxCdkEventServiceWindowKey(this.window)]);
         this.#clickDomRootEventCallbacks = new Set();
         this.#listenToClickDomRootEvent();
         this.#registerOnDestroyCallbacks();
@@ -655,21 +453,22 @@ class RdxCdkEventService {
         }
         this.onDestroyCallbacks.add(destroyClickDomRootEventListener);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxCdkEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxCdkEventService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxCdkEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxCdkEventService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxCdkEventService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxCdkEventService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 const RdxCdkEventServiceToken = new InjectionToken('RdxCdkEventServiceToken');
 const existsErrorMessage = 'RdxCdkEventService should be provided only once!';
-const deleteRdxCdkEventServiceWindowKey = () => {
+const deleteRdxCdkEventServiceWindowKey = (window) => {
     delete window[RdxCdkEventServiceWindowKey];
 };
 const getProvider = (throwWhenExists = true) => ({
     provide: RdxCdkEventServiceToken,
     useFactory: () => {
         isDevMode() && console.log('providing RdxCdkEventService...');
+        const window = injectWindow();
         if (window[RdxCdkEventServiceWindowKey]) {
             if (throwWhenExists) {
                 throw Error(existsErrorMessage);
@@ -702,17 +501,17 @@ class RdxPopoverRootDirective {
          * @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);
+        this.defaultOpen = input(false, { transform: booleanAttribute });
         /**
          * @description The controlled state of the popover. `open` input take precedence of `defaultOpen` input.
          * @default undefined
          */
-        this.open = input(void 0);
+        this.open = input(void 0, { transform: booleanAttribute });
         /**
          * @description Whether to control the state of the popover from external. Use in conjunction with `open` input.
          * @default undefined
          */
-        this.externalControl = input(void 0);
+        this.externalControl = input(void 0, { transform: booleanAttribute });
         /**
          * @description Whether to take into account CSS opening/closing animations.
          * @default false
@@ -984,14 +783,13 @@ class RdxPopoverRootDirective {
             });
         });
     }
-    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: { 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.0.5", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverRootDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverRoot]',
-                    standalone: true,
                     exportAs: 'rdxPopoverRoot'
                 }]
         }], ctorParameters: () => [] });
@@ -1014,7 +812,7 @@ class RdxPopoverAnchorDirective {
         /** @ignore */
         this.overlayOrigin = inject(CdkOverlayOrigin);
         /** @ignore */
-        this.document = inject(DOCUMENT);
+        this.document = injectDocument();
         /** @ignore */
         this.name = computed(() => `rdx-popover-external-anchor-${this.popoverRoot?.uniqueId()}`);
     }
@@ -1039,19 +837,18 @@ class RdxPopoverAnchorDirective {
         });
         this.popoverRoot?.popoverTriggerDirective().elementRef.nativeElement.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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverAnchorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverAnchorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverAnchor]',
-                    standalone: true,
                     exportAs: 'rdxPopoverAnchor',
                     hostDirectives: [CdkOverlayOrigin],
                     host: {
@@ -1081,12 +878,12 @@ class RdxPopoverArrowDirective {
          * @description The width of the arrow in pixels.
          * @default 10
          */
-        this.width = input(10);
+        this.width = input(RDX_POSITIONING_DEFAULTS.arrow.width, { transform: numberAttribute });
         /**
          * @description The height of the arrow in pixels.
          * @default 5
          */
-        this.height = input(5);
+        this.height = input(RDX_POSITIONING_DEFAULTS.arrow.height, { transform: numberAttribute });
         /** @ignore */
         this.arrowSvgElement = computed(() => {
             const width = this.width();
@@ -1105,30 +902,33 @@ class RdxPopoverArrowDirective {
         this.currentArrowSvgElement = signal(void 0);
         /** @ignore */
         this.position = toSignal(this.popoverRoot.popoverContentDirective().positionChange());
+        afterNextRender({
+            write: () => {
+                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.onArrowSvgElementChangeEffect();
-        this.onContentPositionChangeEffect();
+        this.onContentPositionAndArrowDimensionsChangeEffect();
     }
     /** @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) {
+    setPosition(position, arrowDimensions) {
         this.setAnchorOrTriggerRect();
-        const posParams = getArrowPositionParams(getSideAndAlignFromAllPossibleConnectedPositions(position.connectionPair), { width: this.width(), height: this.height() }, { width: this.anchorOrTriggerRect.width, height: this.anchorOrTriggerRect.height });
+        const posParams = getArrowPositionParams(getSideAndAlignFromAllPossibleConnectedPositions(position.connectionPair), { width: arrowDimensions.width, height: arrowDimensions.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);
+        this.renderer.setStyle(this.elementRef.nativeElement, 'transformOrigin', posParams.transformOrigin);
     }
     /** @ignore */
     onArrowSvgElementChangeEffect() {
@@ -1147,30 +947,30 @@ class RdxPopoverArrowDirective {
         });
     }
     /** @ignore */
-    onContentPositionChangeEffect() {
+    onContentPositionAndArrowDimensionsChangeEffect() {
         effect(() => {
             const position = this.position();
+            const arrowDimensions = { width: this.width(), height: this.height() };
             untracked(() => {
                 if (!position) {
                     return;
                 }
-                this.setPosition(position);
+                this.setPosition(position, arrowDimensions);
             });
         });
     }
-    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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverArrowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverArrowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverArrow]',
-                    standalone: true,
                     providers: [
                         {
                             provide: RdxPopoverArrowToken,
@@ -1199,19 +999,18 @@ class RdxPopoverCloseDirective {
             });
         });
     }
-    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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverClose]',
-                    standalone: true,
                     host: {
                         type: 'button',
                         '(click)': 'popoverRoot.handleClose()'
@@ -1252,8 +1051,8 @@ class RdxPopoverContentAttributesComponent {
             ((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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverContentAttributesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", 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)
@@ -1262,11 +1061,10 @@ class RdxPopoverContentAttributesComponent {
         <ng-content />
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverContentAttributesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverContentAttributesComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[rdxPopoverContentAttributes]',
-                    standalone: true,
                     template: `
         <ng-content />
     `,
@@ -1300,8 +1098,8 @@ const _imports = [
     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 }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverModule, imports: [RdxPopoverArrowDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverModule, imports: [RdxPopoverArrowDirective,
             RdxPopoverCloseDirective,
             RdxPopoverContentDirective,
             RdxPopoverTriggerDirective,
@@ -1314,9 +1112,9 @@ class RdxPopoverModule {
             RdxPopoverRootDirective,
             RdxPopoverAnchorDirective,
             RdxPopoverContentAttributesComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [..._imports],
@@ -1328,5 +1126,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { RdxPopoverAlign, RdxPopoverAnchorDirective, RdxPopoverAnimationStatus, RdxPopoverArrowDirective, RdxPopoverAttachDetachEvent, RdxPopoverCloseDirective, RdxPopoverContentAttributesComponent, RdxPopoverContentDirective, RdxPopoverModule, RdxPopoverRootDirective, RdxPopoverSide, RdxPopoverState, RdxPopoverTriggerDirective };
+export { RdxPopoverAnchorDirective, RdxPopoverArrowDirective, RdxPopoverCloseDirective, RdxPopoverContentAttributesComponent, RdxPopoverContentDirective, RdxPopoverModule, RdxPopoverRootDirective, RdxPopoverTriggerDirective };
 //# sourceMappingURL=radix-ng-primitives-popover.mjs.map