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

package/fesm2022/radix-ng-primitives-hover-card.mjs

@@ -1,1246 +0,0 @@
-import * as i0 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, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import * as i1 from '@angular/cdk/overlay';
-import { Overlay, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
-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, Subject, map, debounce, timer } from 'rxjs';
-
-const RdxHoverCardAnchorToken = new InjectionToken('RdxHoverCardAnchorToken');
-
-const RdxHoverCardArrowToken = new InjectionToken('RdxHoverCardArrowToken');
-
-const RdxHoverCardCloseToken = new InjectionToken('RdxHoverCardCloseToken');
-
-const RdxHoverCardContentAttributesToken = new InjectionToken('RdxHoverCardContentAttributesToken');
-
-var RdxHoverCardState;
-(function (RdxHoverCardState) {
-    RdxHoverCardState["OPEN"] = "open";
-    RdxHoverCardState["CLOSED"] = "closed";
-})(RdxHoverCardState || (RdxHoverCardState = {}));
-var RdxHoverCardAction;
-(function (RdxHoverCardAction) {
-    RdxHoverCardAction["OPEN"] = "open";
-    RdxHoverCardAction["CLOSE"] = "close";
-})(RdxHoverCardAction || (RdxHoverCardAction = {}));
-var RdxHoverCardAttachDetachEvent;
-(function (RdxHoverCardAttachDetachEvent) {
-    RdxHoverCardAttachDetachEvent["ATTACH"] = "attach";
-    RdxHoverCardAttachDetachEvent["DETACH"] = "detach";
-})(RdxHoverCardAttachDetachEvent || (RdxHoverCardAttachDetachEvent = {}));
-var RdxHoverCardAnimationStatus;
-(function (RdxHoverCardAnimationStatus) {
-    RdxHoverCardAnimationStatus["OPEN_STARTED"] = "open_started";
-    RdxHoverCardAnimationStatus["OPEN_ENDED"] = "open_ended";
-    RdxHoverCardAnimationStatus["CLOSED_STARTED"] = "closed_started";
-    RdxHoverCardAnimationStatus["CLOSED_ENDED"] = "closed_ended";
-})(RdxHoverCardAnimationStatus || (RdxHoverCardAnimationStatus = {}));
-
-/**
- * @group Components
- */
-class RdxHoverCardContentDirective {
-    constructor() {
-        /** @ignore */
-        this.rootDirective = injectHoverCardRoot();
-        /** @ignore */
-        this.templateRef = inject(TemplateRef);
-        /** @ignore */
-        this.overlay = inject(Overlay);
-        /** @ignore */
-        this.destroyRef = inject(DestroyRef);
-        /** @ignore */
-        this.connectedOverlay = inject(CdkConnectedOverlay);
-        /** @ignore */
-        this.name = computed(() => `rdx-hover-card-trigger-${this.rootDirective.uniqueId()}`, ...(ngDevMode ? [{ debugName: "name" }] : []));
-        /**
-         * The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
-         * @group Props
-         * @defaultValue top
-         */
-        this.side = input(RdxPositionSide.Top, ...(ngDevMode ? [{ debugName: "side" }] : []));
-        /**
-         * The distance in pixels from the trigger.
-         * @group Props
-         * @defaultValue undefined
-         */
-        this.sideOffset = input(NaN, ...(ngDevMode ? [{ debugName: "sideOffset", transform: numberAttribute }] : [{
-                transform: numberAttribute
-            }]));
-        /**
-         * The preferred alignment against the trigger. May change when collisions occur.
-         * @group Props
-         * @defaultValue center
-         */
-        this.align = input(RdxPositionAlign.Center, ...(ngDevMode ? [{ debugName: "align" }] : []));
-        /**
-         * An offset in pixels from the "start" or "end" alignment options.
-         * @group Props
-         * @defaultValue undefined
-         */
-        this.alignOffset = input(NaN, ...(ngDevMode ? [{ debugName: "alignOffset", transform: numberAttribute }] : [{
-                transform: numberAttribute
-            }]));
-        /**
-         * Whether to add some alternate positions of the content.
-         * @group Props
-         * @defaultValue false
-         */
-        this.alternatePositionsDisabled = input(false, ...(ngDevMode ? [{ debugName: "alternatePositionsDisabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        /**
-         * Whether to prevent `onOverlayEscapeKeyDown` handler from calling.
-         * @group Props
-         * @defaultValue false
-         */
-        this.onOverlayEscapeKeyDownDisabled = input(false, ...(ngDevMode ? [{ debugName: "onOverlayEscapeKeyDownDisabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        /**
-         * Whether to prevent `onOverlayOutsideClick` handler from calling.
-         * @group Props
-         * @defaultValue false
-         */
-        this.onOverlayOutsideClickDisabled = input(false, ...(ngDevMode ? [{ debugName: "onOverlayOutsideClickDisabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        /**
-         * Event handler called when the escape key is down.
-         * It can be prevented by setting `onOverlayEscapeKeyDownDisabled` input to `true`.
-         * @group Emits
-         */
-        this.onOverlayEscapeKeyDown = output();
-        /**
-         * Event handler called when a pointer event occurs outside the bounds of the component.
-         * It can be prevented by setting `onOverlayOutsideClickDisabled` input to `true`.
-         * @group Emits
-         */
-        this.onOverlayOutsideClick = output();
-        /**
-         * Event handler called after the overlay is open
-         * @group Emits
-         */
-        this.onOpen = output();
-        /**
-         * Event handler called after the overlay is closed
-         * @group Emits
-         */
-        this.onClosed = output();
-        /** @ingore */
-        this.positions = computed(() => this.computePositions(), ...(ngDevMode ? [{ debugName: "positions" }] : []));
-        this.onOriginChangeEffect();
-        this.onPositionChangeEffect();
-    }
-    /** @ignore */
-    ngOnInit() {
-        this.setScrollStrategy();
-        this.setHasBackdrop();
-        this.setDisableClose();
-        this.onAttach();
-        this.onDetach();
-        this.connectKeydownEscape();
-        this.connectOutsideClick();
-    }
-    /** @ignore */
-    open() {
-        if (this.connectedOverlay.open) {
-            return;
-        }
-        const prevOpen = this.connectedOverlay.open;
-        this.connectedOverlay.open = true;
-        this.fireOverlayNgOnChanges('open', this.connectedOverlay.open, prevOpen);
-    }
-    /** @ignore */
-    close() {
-        if (!this.connectedOverlay.open) {
-            return;
-        }
-        const prevOpen = this.connectedOverlay.open;
-        this.connectedOverlay.open = false;
-        this.fireOverlayNgOnChanges('open', this.connectedOverlay.open, prevOpen);
-    }
-    /** @ignore */
-    positionChange() {
-        return this.connectedOverlay.positionChange.asObservable();
-    }
-    /** @ignore */
-    connectKeydownEscape() {
-        this.connectedOverlay.overlayKeydown
-            .asObservable()
-            .pipe(filter(() => !this.onOverlayEscapeKeyDownDisabled() &&
-            !this.rootDirective.rdxCdkEventService?.primitivePreventedFromCdkEvent(this.rootDirective, 'cdkOverlayEscapeKeyDown')), filter((event) => event.key === 'Escape'), tap((event) => {
-            this.onOverlayEscapeKeyDown.emit(event);
-        }), filter(() => !this.rootDirective.firstDefaultOpen()), tap(() => {
-            this.rootDirective.handleClose();
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe();
-    }
-    /** @ignore */
-    connectOutsideClick() {
-        this.connectedOverlay.overlayOutsideClick
-            .asObservable()
-            .pipe(filter(() => !this.onOverlayOutsideClickDisabled() &&
-            !this.rootDirective.rdxCdkEventService?.primitivePreventedFromCdkEvent(this.rootDirective, 'cdkOverlayOutsideClick')), 
-        /**
-         * Handle the situation when an anchor is added and the anchor becomes the origin of the overlay
-         * hence  the trigger will be considered the outside element
-         */
-        filter((event) => {
-            return (!this.rootDirective.anchorDirective() ||
-                !this.rootDirective
-                    .triggerDirective()
-                    .elementRef.nativeElement.contains(event.target));
-        }), tap((event) => {
-            this.onOverlayOutsideClick.emit(event);
-        }), filter(() => !this.rootDirective.firstDefaultOpen()), tap(() => {
-            this.rootDirective.handleClose();
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe();
-    }
-    /** @ignore */
-    onAttach() {
-        this.connectedOverlay.attach
-            .asObservable()
-            .pipe(tap(() => {
-            /**
-             * `this.onOpen.emit();` is being delegated to the rootDirective directive due to the opening animation
-             */
-            this.rootDirective.attachDetachEvent.set(RdxHoverCardAttachDetachEvent.ATTACH);
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe();
-    }
-    /** @ignore */
-    onDetach() {
-        this.connectedOverlay.detach
-            .asObservable()
-            .pipe(tap(() => {
-            /**
-             * `this.onClosed.emit();` is being delegated to the rootDirective directive due to the closing animation
-             */
-            this.rootDirective.attachDetachEvent.set(RdxHoverCardAttachDetachEvent.DETACH);
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe();
-    }
-    /** @ignore */
-    setScrollStrategy() {
-        const prevScrollStrategy = this.connectedOverlay.scrollStrategy;
-        this.connectedOverlay.scrollStrategy = this.overlay.scrollStrategies.reposition();
-        this.fireOverlayNgOnChanges('scrollStrategy', this.connectedOverlay.scrollStrategy, prevScrollStrategy);
-    }
-    /** @ignore */
-    setHasBackdrop() {
-        const prevHasBackdrop = this.connectedOverlay.hasBackdrop;
-        this.connectedOverlay.hasBackdrop = false;
-        this.fireOverlayNgOnChanges('hasBackdrop', this.connectedOverlay.hasBackdrop, prevHasBackdrop);
-    }
-    /** @ignore */
-    setDisableClose() {
-        const prevDisableClose = this.connectedOverlay.disableClose;
-        this.connectedOverlay.disableClose = true;
-        this.fireOverlayNgOnChanges('disableClose', this.connectedOverlay.disableClose, prevDisableClose);
-    }
-    /** @ignore */
-    setOrigin(origin) {
-        const prevOrigin = this.connectedOverlay.origin;
-        this.connectedOverlay.origin = origin;
-        this.fireOverlayNgOnChanges('origin', this.connectedOverlay.origin, prevOrigin);
-    }
-    /** @ignore */
-    setPositions(positions) {
-        const prevPositions = this.connectedOverlay.positions;
-        this.connectedOverlay.positions = positions;
-        this.fireOverlayNgOnChanges('positions', this.connectedOverlay.positions, prevPositions);
-        this.connectedOverlay.overlayRef?.updatePosition();
-    }
-    /** @ignore */
-    computePositions() {
-        const arrowHeight = this.rootDirective.arrowDirective()?.height() ?? 0;
-        const offsets = {
-            sideOffset: arrowHeight + (isNaN(this.sideOffset()) ? RDX_POSITIONING_DEFAULTS.offsets.side : this.sideOffset()),
-            alignOffset: isNaN(this.alignOffset()) ? RDX_POSITIONING_DEFAULTS.offsets.align : this.alignOffset()
-        };
-        const basePosition = getContentPosition({
-            side: this.side(),
-            align: this.align(),
-            sideOffset: offsets.sideOffset,
-            alignOffset: offsets.alignOffset
-        });
-        const positions = [basePosition];
-        if (!this.alternatePositionsDisabled()) {
-            /**
-             * Alternate positions for better user experience along the X/Y axis (e.g. vertical/horizontal scrolling)
-             */
-            const allPossibleConnectedPositions = getAllPossibleConnectedPositions();
-            allPossibleConnectedPositions.forEach((_, key) => {
-                const sideAndAlignArray = key.split('|');
-                if (sideAndAlignArray[0] !== this.side() ||
-                    sideAndAlignArray[1] !== this.align()) {
-                    positions.push(getContentPosition({
-                        side: sideAndAlignArray[0],
-                        align: sideAndAlignArray[1],
-                        sideOffset: offsets.sideOffset,
-                        alignOffset: offsets.alignOffset
-                    }));
-                }
-            });
-        }
-        return positions;
-    }
-    onOriginChangeEffect() {
-        effect(() => {
-            const origin = (this.rootDirective.anchorDirective() ?? this.rootDirective.triggerDirective())
-                .overlayOrigin;
-            untracked(() => {
-                this.setOrigin(origin);
-            });
-        });
-    }
-    /** @ignore */
-    onPositionChangeEffect() {
-        effect(() => {
-            const positions = this.positions();
-            this.alternatePositionsDisabled();
-            untracked(() => {
-                this.setPositions(positions);
-            });
-        });
-    }
-    /** @ignore */
-    fireOverlayNgOnChanges(input, currentValue, previousValue, firstChange = false) {
-        this.connectedOverlay.ngOnChanges({
-            [input]: new SimpleChange(previousValue, currentValue, firstChange)
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxHoverCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxHoverCardContentDirective, isStandalone: true, selector: "[rdxHoverCardContent]", 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: "20.3.3", ngImport: i0, type: RdxHoverCardContentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxHoverCardContent]',
-                    hostDirectives: [CdkConnectedOverlay]
-                }]
-        }], ctorParameters: () => [] });
-
-class RdxHoverCardTriggerDirective {
-    constructor() {
-        /** @ignore */
-        this.rootDirective = injectHoverCardRoot();
-        /** @ignore */
-        this.elementRef = inject(ElementRef);
-        /** @ignore */
-        this.overlayOrigin = inject(CdkOverlayOrigin);
-        /** @ignore */
-        this.name = computed(() => `rdx-hover-card-trigger-${this.rootDirective.uniqueId()}`, ...(ngDevMode ? [{ debugName: "name" }] : []));
-    }
-    /** @ignore */
-    pointerenter() {
-        this.rootDirective.handleOpen();
-    }
-    /** @ignore */
-    pointerleave() {
-        this.rootDirective.handleClose();
-    }
-    /** @ignore */
-    focus() {
-        this.rootDirective.handleOpen();
-    }
-    /** @ignore */
-    blur() {
-        this.rootDirective.handleClose();
-    }
-    /** @ignore */
-    click() {
-        this.rootDirective.handleClose();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxHoverCardTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxHoverCardTriggerDirective, isStandalone: true, selector: "[rdxHoverCardTrigger]", host: { listeners: { "pointerenter": "pointerenter()", "pointerleave": "pointerleave()", "focus": "focus()", "blur": "blur()", "click": "click()" }, properties: { "attr.id": "name()", "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "rootDirective.isOpen()", "attr.aria-controls": "rootDirective.contentDirective().name()", "attr.data-state": "rootDirective.state()" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxHoverCardTriggerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxHoverCardTrigger]',
-                    hostDirectives: [CdkOverlayOrigin],
-                    host: {
-                        '[attr.id]': 'name()',
-                        '[attr.aria-haspopup]': '"dialog"',
-                        '[attr.aria-expanded]': 'rootDirective.isOpen()',
-                        '[attr.aria-controls]': 'rootDirective.contentDirective().name()',
-                        '[attr.data-state]': 'rootDirective.state()',
-                        '(pointerenter)': 'pointerenter()',
-                        '(pointerleave)': 'pointerleave()',
-                        '(focus)': 'focus()',
-                        '(blur)': 'blur()',
-                        '(click)': 'click()'
-                    }
-                }]
-        }] });
-
-const RdxCdkEventServiceWindowKey = Symbol('__RdxCdkEventService__');
-
-function eventTypeAsPrimitiveConfigKey(eventType) {
-    return `prevent${eventType[0].toUpperCase()}${eventType.slice(1)}`;
-}
-class RdxCdkEventService {
-    #clickDomRootEventCallbacks;
-    constructor() {
-        this.document = injectDocument();
-        this.destroyRef = inject(DestroyRef);
-        this.ngZone = inject(NgZone);
-        this.renderer2 = inject(Renderer2);
-        this.window = injectWindow();
-        this.onDestroyCallbacks = new Set([() => deleteRdxCdkEventServiceWindowKey(this.window)]);
-        this.#clickDomRootEventCallbacks = new Set();
-        this.#listenToClickDomRootEvent();
-        this.#registerOnDestroyCallbacks();
-    }
-    registerPrimitive(primitiveInstance) {
-        if (!this.primitiveConfigs) {
-            this.primitiveConfigs = new Map();
-        }
-        if (!this.primitiveConfigs.has(primitiveInstance)) {
-            this.primitiveConfigs.set(primitiveInstance, {});
-        }
-    }
-    deregisterPrimitive(primitiveInstance) {
-        if (this.primitiveConfigs?.has(primitiveInstance)) {
-            this.primitiveConfigs.delete(primitiveInstance);
-        }
-    }
-    preventPrimitiveFromCdkEvent(primitiveInstance, eventType) {
-        this.#setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, true);
-    }
-    allowPrimitiveForCdkEvent(primitiveInstance, eventType) {
-        this.#setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, false);
-    }
-    preventPrimitiveFromCdkMultiEvents(primitiveInstance, eventTypes) {
-        eventTypes.forEach((eventType) => {
-            this.#setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, true);
-        });
-    }
-    allowPrimitiveForCdkMultiEvents(primitiveInstance, eventTypes) {
-        eventTypes.forEach((eventType) => {
-            this.#setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, false);
-        });
-    }
-    setPreventPrimitiveFromCdkMixEvents(primitiveInstance, eventTypes) {
-        Object.keys(eventTypes).forEach((eventType) => {
-            this.#setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, eventTypes[eventTypeAsPrimitiveConfigKey(eventType)]);
-        });
-    }
-    primitivePreventedFromCdkEvent(primitiveInstance, eventType) {
-        return this.primitiveConfigs?.get(primitiveInstance)?.[eventTypeAsPrimitiveConfigKey(eventType)];
-    }
-    addClickDomRootEventCallback(callback) {
-        this.#clickDomRootEventCallbacks.add(callback);
-    }
-    removeClickDomRootEventCallback(callback) {
-        return this.#clickDomRootEventCallbacks.delete(callback);
-    }
-    #setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, value) {
-        if (!this.primitiveConfigs?.has(primitiveInstance)) {
-            isDevMode() &&
-                console.error('[RdxCdkEventService.preventPrimitiveFromCdkEvent] RDX Primitive instance has not been registered!', primitiveInstance);
-            return;
-        }
-        switch (eventType) {
-            case 'cdkOverlayOutsideClick':
-                this.primitiveConfigs.get(primitiveInstance).preventCdkOverlayOutsideClick = value;
-                break;
-            case 'cdkOverlayEscapeKeyDown':
-                this.primitiveConfigs.get(primitiveInstance).preventCdkOverlayEscapeKeyDown = value;
-                break;
-        }
-    }
-    #registerOnDestroyCallbacks() {
-        this.destroyRef.onDestroy(() => {
-            this.onDestroyCallbacks.forEach((onDestroyCallback) => onDestroyCallback());
-            this.onDestroyCallbacks.clear();
-        });
-    }
-    #listenToClickDomRootEvent() {
-        const target = this.document;
-        const eventName = 'click';
-        const options = { capture: true };
-        const callback = (event) => {
-            this.#clickDomRootEventCallbacks.forEach((clickDomRootEventCallback) => clickDomRootEventCallback(event));
-        };
-        const major = parseInt(VERSION.major);
-        const minor = parseInt(VERSION.minor);
-        let destroyClickDomRootEventListener;
-        /**
-         * @see src/cdk/platform/features/backwards-compatibility.ts in @angular/cdk
-         */
-        if (major > 19 || (major === 19 && minor > 0) || (major === 0 && minor === 0)) {
-            destroyClickDomRootEventListener = this.ngZone.runOutsideAngular(() => {
-                const destroyClickDomRootEventListenerInternal = this.renderer2.listen(target, eventName, callback, options);
-                return () => {
-                    destroyClickDomRootEventListenerInternal();
-                    this.#clickDomRootEventCallbacks.clear();
-                };
-            });
-        }
-        else {
-            /**
-             * This part can get removed when v19.1 or higher is on the board
-             */
-            destroyClickDomRootEventListener = this.ngZone.runOutsideAngular(() => {
-                target.addEventListener(eventName, callback, options);
-                return () => {
-                    this.ngZone.runOutsideAngular(() => target.removeEventListener(eventName, callback, options));
-                    this.#clickDomRootEventCallbacks.clear();
-                };
-            });
-        }
-        this.onDestroyCallbacks.add(destroyClickDomRootEventListener);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxCdkEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxCdkEventService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxCdkEventService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-const RdxCdkEventServiceToken = new InjectionToken('RdxCdkEventServiceToken');
-const existsErrorMessage = 'RdxCdkEventService should be provided only once!';
-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);
-            }
-            else {
-                isDevMode() && console.warn(existsErrorMessage);
-            }
-        }
-        window[RdxCdkEventServiceWindowKey] ??= new RdxCdkEventService();
-        return window[RdxCdkEventServiceWindowKey];
-    }
-});
-const provideRdxCdkEventServiceInRoot = () => makeEnvironmentProviders([getProvider()]);
-const provideRdxCdkEventService = () => getProvider(false);
-const injectRdxCdkEventService = () => inject(RdxCdkEventServiceToken, { optional: true });
-
-let nextId = 0;
-/**
- * @group Components
- */
-class RdxHoverCardRootDirective {
-    constructor() {
-        /** @ignore */
-        this.uniqueId = signal(++nextId, ...(ngDevMode ? [{ debugName: "uniqueId" }] : []));
-        /** @ignore */
-        this.name = computed(() => `rdx-hover-card-root-${this.uniqueId()}`, ...(ngDevMode ? [{ debugName: "name" }] : []));
-        /**
-         * The anchor directive that comes from outside the hover-card rootDirective
-         * @group Props
-         * @defaultValue undefined
-         */
-        this.anchor = input(void 0, ...(ngDevMode ? [{ debugName: "anchor" }] : []));
-        /**
-         * The open state of the hover-card when it is initially rendered. Use when you do not need to control its open state.
-         * @group Props
-         * @defaultValue false
-         */
-        this.defaultOpen = input(false, ...(ngDevMode ? [{ debugName: "defaultOpen", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        /**
-         * The controlled state of the hover-card. `open` input takes precedence over `defaultOpen` input.
-         * @group Props
-         * @defaultValue undefined
-         */
-        this.open = input(void 0, ...(ngDevMode ? [{ debugName: "open", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        /**
-         * The delay in milliseconds before the hover-card opens.
-         * @group Props
-         * @defaultValue 500
-         */
-        this.openDelay = input(500, ...(ngDevMode ? [{ debugName: "openDelay", transform: numberAttribute }] : [{
-                transform: numberAttribute
-            }]));
-        /**
-         * The delay in milliseconds before the hover-card closes.
-         * @group Props
-         * @defaultValue 200
-         */
-        this.closeDelay = input(200, ...(ngDevMode ? [{ debugName: "closeDelay", transform: numberAttribute }] : [{
-                transform: numberAttribute
-            }]));
-        /**
-         * Whether to control the state of the hover-card from outside. Use in conjunction with `open` input.
-         * @group Props
-         * @defaultValue undefined
-         */
-        this.externalControl = input(void 0, ...(ngDevMode ? [{ debugName: "externalControl", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        /**
-         * Whether to take into account CSS opening/closing animations.
-         * @group Props
-         * @defaultValue false
-         */
-        this.cssAnimation = input(false, ...(ngDevMode ? [{ debugName: "cssAnimation", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        /**
-         * Whether to take into account CSS opening animations. `cssAnimation` input must be set to 'true'
-         * @group Props
-         * @defaultValue false
-         */
-        this.cssOpeningAnimation = input(false, ...(ngDevMode ? [{ debugName: "cssOpeningAnimation", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        /**
-         * Whether to take into account CSS closing animations. `cssAnimation` input must be set to 'true'
-         * @group Props
-         * @defaultValue false
-         */
-        this.cssClosingAnimation = input(false, ...(ngDevMode ? [{ debugName: "cssClosingAnimation", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        /** @ignore */
-        this.cssAnimationStatus = signal(null, ...(ngDevMode ? [{ debugName: "cssAnimationStatus" }] : []));
-        /** @ignore */
-        this.contentDirective = contentChild.required(RdxHoverCardContentDirective);
-        /** @ignore */
-        this.triggerDirective = contentChild.required(RdxHoverCardTriggerDirective);
-        /** @ignore */
-        this.arrowDirective = contentChild(RdxHoverCardArrowToken, ...(ngDevMode ? [{ debugName: "arrowDirective" }] : []));
-        /** @ignore */
-        this.closeDirective = contentChild(RdxHoverCardCloseToken, ...(ngDevMode ? [{ debugName: "closeDirective" }] : []));
-        /** @ignore */
-        this.contentAttributesComponent = contentChild(RdxHoverCardContentAttributesToken, ...(ngDevMode ? [{ debugName: "contentAttributesComponent" }] : []));
-        /** @ignore */
-        this.internalAnchorDirective = contentChild(RdxHoverCardAnchorToken, ...(ngDevMode ? [{ debugName: "internalAnchorDirective" }] : []));
-        /** @ignore */
-        this.viewContainerRef = inject(ViewContainerRef);
-        /** @ignore */
-        this.rdxCdkEventService = injectRdxCdkEventService();
-        /** @ignore */
-        this.destroyRef = inject(DestroyRef);
-        /** @ignore */
-        this.state = signal(RdxHoverCardState.CLOSED, ...(ngDevMode ? [{ debugName: "state" }] : []));
-        /** @ignore */
-        this.attachDetachEvent = signal(RdxHoverCardAttachDetachEvent.DETACH, ...(ngDevMode ? [{ debugName: "attachDetachEvent" }] : []));
-        /** @ignore */
-        this.isFirstDefaultOpen = signal(false, ...(ngDevMode ? [{ debugName: "isFirstDefaultOpen" }] : []));
-        /** @ignore */
-        this.anchorDirective = computed(() => this.internalAnchorDirective() ?? this.anchor(), ...(ngDevMode ? [{ debugName: "anchorDirective" }] : []));
-        /** @ignore */
-        this.actionSubject$ = new Subject();
-        /** @ignore */
-        this.onAnchorChangeEffect = () => {
-            effect(() => {
-                const anchor = this.anchor();
-                untracked(() => {
-                    if (anchor) {
-                        anchor.setRoot(this);
-                    }
-                });
-            });
-        };
-        this.rdxCdkEventService?.registerPrimitive(this);
-        this.destroyRef.onDestroy(() => this.rdxCdkEventService?.deregisterPrimitive(this));
-        this.actionSubscription();
-        this.onStateChangeEffect();
-        this.onCssAnimationStatusChangeChangeEffect();
-        this.onOpenChangeEffect();
-        this.onIsFirstDefaultOpenChangeEffect();
-        this.onAnchorChangeEffect();
-        this.emitOpenOrClosedEventEffect();
-        afterNextRender({
-            write: () => {
-                if (this.defaultOpen() && !this.open()) {
-                    this.isFirstDefaultOpen.set(true);
-                }
-            }
-        });
-    }
-    /** @ignore */
-    getAnimationParamsSnapshot() {
-        return {
-            cssAnimation: this.cssAnimation(),
-            cssOpeningAnimation: this.cssOpeningAnimation(),
-            cssClosingAnimation: this.cssClosingAnimation(),
-            cssAnimationStatus: this.cssAnimationStatus(),
-            attachDetachEvent: this.attachDetachEvent(),
-            state: this.state(),
-            canEmitOnOpenOrOnClosed: this.canEmitOnOpenOrOnClosed()
-        };
-    }
-    /** @ignore */
-    controlledExternally() {
-        return this.externalControl;
-    }
-    /** @ignore */
-    firstDefaultOpen() {
-        return this.isFirstDefaultOpen();
-    }
-    /** @ignore */
-    handleOpen() {
-        if (this.externalControl()) {
-            return;
-        }
-        this.actionSubject$.next(RdxHoverCardAction.OPEN);
-    }
-    /** @ignore */
-    handleClose(closeButton) {
-        if (this.isFirstDefaultOpen()) {
-            this.isFirstDefaultOpen.set(false);
-        }
-        if (!closeButton && this.externalControl()) {
-            return;
-        }
-        this.actionSubject$.next(RdxHoverCardAction.CLOSE);
-    }
-    /** @ignore */
-    handleToggle() {
-        if (this.externalControl()) {
-            return;
-        }
-        this.isOpen() ? this.handleClose() : this.handleOpen();
-    }
-    /** @ignore */
-    isOpen(state) {
-        return (state ?? this.state()) === RdxHoverCardState.OPEN;
-    }
-    /** @ignore */
-    setState(state = RdxHoverCardState.CLOSED) {
-        if (state === this.state()) {
-            return;
-        }
-        this.state.set(state);
-    }
-    /** @ignore */
-    openContent() {
-        this.contentDirective().open();
-        if (!this.cssAnimation() || !this.cssOpeningAnimation()) {
-            this.cssAnimationStatus.set(null);
-        }
-    }
-    /** @ignore */
-    closeContent() {
-        this.contentDirective().close();
-        if (!this.cssAnimation() || !this.cssClosingAnimation()) {
-            this.cssAnimationStatus.set(null);
-        }
-    }
-    /** @ignore */
-    emitOnOpen() {
-        this.contentDirective().onOpen.emit();
-    }
-    /** @ignore */
-    emitOnClosed() {
-        this.contentDirective().onClosed.emit();
-    }
-    /** @ignore */
-    ifOpenOrCloseWithoutAnimations(state) {
-        return (!this.contentAttributesComponent() ||
-            !this.cssAnimation() ||
-            (this.cssAnimation() && !this.cssClosingAnimation() && state === RdxHoverCardState.CLOSED) ||
-            (this.cssAnimation() && !this.cssOpeningAnimation() && state === RdxHoverCardState.OPEN) ||
-            // !this.cssAnimationStatus() ||
-            (this.cssOpeningAnimation() &&
-                state === RdxHoverCardState.OPEN &&
-                [RdxHoverCardAnimationStatus.OPEN_STARTED].includes(this.cssAnimationStatus())) ||
-            (this.cssClosingAnimation() &&
-                state === RdxHoverCardState.CLOSED &&
-                [RdxHoverCardAnimationStatus.CLOSED_STARTED].includes(this.cssAnimationStatus())));
-    }
-    /** @ignore */
-    ifOpenOrCloseWithAnimations(cssAnimationStatus) {
-        return (this.contentAttributesComponent() &&
-            this.cssAnimation() &&
-            cssAnimationStatus &&
-            ((this.cssOpeningAnimation() &&
-                this.state() === RdxHoverCardState.OPEN &&
-                [RdxHoverCardAnimationStatus.OPEN_ENDED].includes(cssAnimationStatus)) ||
-                (this.cssClosingAnimation() &&
-                    this.state() === RdxHoverCardState.CLOSED &&
-                    [RdxHoverCardAnimationStatus.CLOSED_ENDED].includes(cssAnimationStatus))));
-    }
-    /** @ignore */
-    openOrClose(state) {
-        const isOpen = this.isOpen(state);
-        isOpen ? this.openContent() : this.closeContent();
-    }
-    /** @ignore */
-    emitOnOpenOrOnClosed(state) {
-        this.isOpen(state)
-            ? this.attachDetachEvent() === RdxHoverCardAttachDetachEvent.ATTACH && this.emitOnOpen()
-            : this.attachDetachEvent() === RdxHoverCardAttachDetachEvent.DETACH && this.emitOnClosed();
-    }
-    /** @ignore */
-    canEmitOnOpenOrOnClosed() {
-        return (!this.cssAnimation() ||
-            (!this.cssOpeningAnimation() && this.state() === RdxHoverCardState.OPEN) ||
-            (this.cssOpeningAnimation() &&
-                this.state() === RdxHoverCardState.OPEN &&
-                this.cssAnimationStatus() === RdxHoverCardAnimationStatus.OPEN_ENDED) ||
-            (!this.cssClosingAnimation() && this.state() === RdxHoverCardState.CLOSED) ||
-            (this.cssClosingAnimation() &&
-                this.state() === RdxHoverCardState.CLOSED &&
-                this.cssAnimationStatus() === RdxHoverCardAnimationStatus.CLOSED_ENDED));
-    }
-    /** @ignore */
-    onStateChangeEffect() {
-        let isFirst = true;
-        effect(() => {
-            const state = this.state();
-            untracked(() => {
-                if (isFirst) {
-                    isFirst = false;
-                    return;
-                }
-                if (!this.ifOpenOrCloseWithoutAnimations(state)) {
-                    return;
-                }
-                this.openOrClose(state);
-            });
-        }, {});
-    }
-    /** @ignore */
-    onCssAnimationStatusChangeChangeEffect() {
-        let isFirst = true;
-        effect(() => {
-            const cssAnimationStatus = this.cssAnimationStatus();
-            untracked(() => {
-                if (isFirst) {
-                    isFirst = false;
-                    return;
-                }
-                if (!this.ifOpenOrCloseWithAnimations(cssAnimationStatus)) {
-                    return;
-                }
-                this.openOrClose(this.state());
-            });
-        });
-    }
-    /** @ignore */
-    emitOpenOrClosedEventEffect() {
-        let isFirst = true;
-        effect(() => {
-            this.attachDetachEvent();
-            this.cssAnimationStatus();
-            untracked(() => {
-                if (isFirst) {
-                    isFirst = false;
-                    return;
-                }
-                const canEmitOpenClose = untracked(() => this.canEmitOnOpenOrOnClosed());
-                if (!canEmitOpenClose) {
-                    return;
-                }
-                this.emitOnOpenOrOnClosed(this.state());
-            });
-        });
-    }
-    /** @ignore */
-    onOpenChangeEffect() {
-        effect(() => {
-            const open = this.open();
-            untracked(() => {
-                this.setState(open ? RdxHoverCardState.OPEN : RdxHoverCardState.CLOSED);
-            });
-        });
-    }
-    /** @ignore */
-    onIsFirstDefaultOpenChangeEffect() {
-        const effectRef = effect(() => {
-            const defaultOpen = this.defaultOpen();
-            untracked(() => {
-                if (!defaultOpen || this.open()) {
-                    effectRef.destroy();
-                    return;
-                }
-                this.handleOpen();
-            });
-        }, ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
-    }
-    /** @ignore */
-    actionSubscription() {
-        this.actionSubject$
-            .asObservable()
-            .pipe(map((action) => {
-            switch (action) {
-                case RdxHoverCardAction.OPEN:
-                    return { action, duration: this.openDelay() };
-                case RdxHoverCardAction.CLOSE:
-                    return { action, duration: this.closeDelay() };
-            }
-        }), debounce((config) => timer(config.duration)), tap((config) => {
-            switch (config.action) {
-                case RdxHoverCardAction.OPEN:
-                    this.setState(RdxHoverCardState.OPEN);
-                    break;
-                case RdxHoverCardAction.CLOSE:
-                    this.setState(RdxHoverCardState.CLOSED);
-                    break;
-            }
-        }), takeUntilDestroyed())
-            .subscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxHoverCardRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.3", type: RdxHoverCardRootDirective, isStandalone: true, selector: "[rdxHoverCardRoot]", 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 }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", 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: "contentDirective", first: true, predicate: RdxHoverCardContentDirective, descendants: true, isSignal: true }, { propertyName: "triggerDirective", first: true, predicate: RdxHoverCardTriggerDirective, descendants: true, isSignal: true }, { propertyName: "arrowDirective", first: true, predicate: RdxHoverCardArrowToken, descendants: true, isSignal: true }, { propertyName: "closeDirective", first: true, predicate: RdxHoverCardCloseToken, descendants: true, isSignal: true }, { propertyName: "contentAttributesComponent", first: true, predicate: RdxHoverCardContentAttributesToken, descendants: true, isSignal: true }, { propertyName: "internalAnchorDirective", first: true, predicate: RdxHoverCardAnchorToken, descendants: true, isSignal: true }], exportAs: ["rdxHoverCardRoot"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxHoverCardRootDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxHoverCardRoot]',
-                    exportAs: 'rdxHoverCardRoot'
-                }]
-        }], ctorParameters: () => [] });
-
-function injectHoverCardRoot(optional = false) {
-    isDevMode() && assertInInjectionContext(injectHoverCardRoot);
-    return inject(RdxHoverCardRootDirective, { optional });
-}
-
-class RdxHoverCardAnchorDirective {
-    constructor() {
-        /**
-         * @ignore
-         * If outside the rootDirective then null, otherwise the rootDirective directive - with optional `true` passed in as the first param.
-         * If outside the rootDirective and non-null value that means the html structure is wrong - hover-card inside hover-card.
-         * */
-        this.rootDirective = injectHoverCardRoot(true);
-        /** @ignore */
-        this.elementRef = inject(ElementRef);
-        /** @ignore */
-        this.overlayOrigin = inject(CdkOverlayOrigin);
-        /** @ignore */
-        this.document = injectDocument();
-        /** @ignore */
-        this.name = computed(() => `rdx-hover-card-external-anchor-${this.rootDirective?.uniqueId()}`, ...(ngDevMode ? [{ debugName: "name" }] : []));
-    }
-    /** @ignore */
-    click() {
-        this.emitOutsideClick();
-    }
-    /** @ignore */
-    setRoot(root) {
-        this.rootDirective = root;
-    }
-    emitOutsideClick() {
-        if (!this.rootDirective?.isOpen() || this.rootDirective?.contentDirective().onOverlayOutsideClickDisabled()) {
-            return;
-        }
-        const clickEvent = new MouseEvent('click', {
-            view: this.document.defaultView,
-            bubbles: true,
-            cancelable: true,
-            relatedTarget: this.elementRef.nativeElement
-        });
-        this.rootDirective?.triggerDirective().elementRef.nativeElement.dispatchEvent(clickEvent);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxHoverCardAnchorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxHoverCardAnchorDirective, isStandalone: true, selector: "[rdxHoverCardAnchor]", host: { attributes: { "type": "button" }, listeners: { "click": "click()" }, properties: { "attr.id": "name()", "attr.aria-haspopup": "\"dialog\"" } }, providers: [
-            {
-                provide: RdxHoverCardAnchorToken,
-                useExisting: forwardRef(() => RdxHoverCardAnchorDirective)
-            }
-        ], exportAs: ["rdxHoverCardAnchor"], hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxHoverCardAnchorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxHoverCardAnchor]',
-                    exportAs: 'rdxHoverCardAnchor',
-                    hostDirectives: [CdkOverlayOrigin],
-                    host: {
-                        type: 'button',
-                        '[attr.id]': 'name()',
-                        '[attr.aria-haspopup]': '"dialog"',
-                        '(click)': 'click()'
-                    },
-                    providers: [
-                        {
-                            provide: RdxHoverCardAnchorToken,
-                            useExisting: forwardRef(() => RdxHoverCardAnchorDirective)
-                        }
-                    ]
-                }]
-        }] });
-
-/**
- * @group Components
- */
-class RdxHoverCardArrowDirective {
-    constructor() {
-        /** @ignore */
-        this.renderer = inject(Renderer2);
-        /** @ignore */
-        this.rootDirective = injectHoverCardRoot();
-        /** @ignore */
-        this.elementRef = inject(ElementRef);
-        /**
-         * The width of the arrow in pixels.
-         * @group Props
-         * @defaultValue 10
-         */
-        this.width = input(RDX_POSITIONING_DEFAULTS.arrow.width, ...(ngDevMode ? [{ debugName: "width", transform: numberAttribute }] : [{ transform: numberAttribute }]));
-        /**
-         * The height of the arrow in pixels.
-         * @group Props
-         * @defaultValue 5
-         */
-        this.height = input(RDX_POSITIONING_DEFAULTS.arrow.height, ...(ngDevMode ? [{ debugName: "height", transform: numberAttribute }] : [{ transform: numberAttribute }]));
-        /** @ignore */
-        this.arrowSvgElement = computed(() => {
-            const width = this.width();
-            const height = this.height();
-            const svgElement = this.renderer.createElement('svg', 'svg');
-            this.renderer.setAttribute(svgElement, 'viewBox', '0 0 30 10');
-            this.renderer.setAttribute(svgElement, 'width', String(width));
-            this.renderer.setAttribute(svgElement, 'height', String(height));
-            const polygonElement = this.renderer.createElement('polygon', 'svg');
-            this.renderer.setAttribute(polygonElement, 'points', '0,0 30,0 15,10');
-            this.renderer.setAttribute(svgElement, 'preserveAspectRatio', 'none');
-            this.renderer.appendChild(svgElement, polygonElement);
-            return svgElement;
-        }, ...(ngDevMode ? [{ debugName: "arrowSvgElement" }] : []));
-        /** @ignore */
-        this.currentArrowSvgElement = signal(void 0, ...(ngDevMode ? [{ debugName: "currentArrowSvgElement" }] : []));
-        /** @ignore */
-        this.position = toSignal(this.rootDirective.contentDirective().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.onContentPositionAndArrowDimensionsChangeEffect();
-    }
-    /** @ignore */
-    setAnchorOrTriggerRect() {
-        this.anchorOrTriggerRect = (this.rootDirective.anchorDirective() ?? this.rootDirective.triggerDirective()).elementRef.nativeElement.getBoundingClientRect();
-    }
-    /** @ignore */
-    setPosition(position, arrowDimensions) {
-        this.setAnchorOrTriggerRect();
-        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() {
-        effect(() => {
-            const arrowElement = this.arrowSvgElement();
-            untracked(() => {
-                const currentArrowSvgElement = this.currentArrowSvgElement();
-                if (currentArrowSvgElement) {
-                    this.renderer.removeChild(this.elementRef.nativeElement, currentArrowSvgElement);
-                }
-                this.currentArrowSvgElement.set(arrowElement);
-                this.renderer.setStyle(this.elementRef.nativeElement, 'width', `${this.width()}px`);
-                this.renderer.setStyle(this.elementRef.nativeElement, 'height', `${this.height()}px`);
-                this.renderer.appendChild(this.elementRef.nativeElement, this.currentArrowSvgElement());
-            });
-        });
-    }
-    /** @ignore */
-    onContentPositionAndArrowDimensionsChangeEffect() {
-        effect(() => {
-            const position = this.position();
-            const arrowDimensions = { width: this.width(), height: this.height() };
-            untracked(() => {
-                if (!position) {
-                    return;
-                }
-                this.setPosition(position, arrowDimensions);
-            });
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxHoverCardArrowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxHoverCardArrowDirective, isStandalone: true, selector: "[rdxHoverCardArrow]", 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: RdxHoverCardArrowToken,
-                useExisting: forwardRef(() => RdxHoverCardArrowDirective)
-            }
-        ], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxHoverCardArrowDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxHoverCardArrow]',
-                    providers: [
-                        {
-                            provide: RdxHoverCardArrowToken,
-                            useExisting: forwardRef(() => RdxHoverCardArrowDirective)
-                        }
-                    ]
-                }]
-        }], ctorParameters: () => [] });
-
-/**
- * TODO: to be removed? But it seems to be useful when controlled from outside
- */
-class RdxHoverCardCloseDirective {
-    constructor() {
-        /** @ignore */
-        this.rootDirective = injectHoverCardRoot();
-        /** @ignore */
-        this.elementRef = inject(ElementRef);
-        /** @ignore */
-        this.renderer = inject(Renderer2);
-        this.onIsControlledExternallyEffect();
-    }
-    /** @ignore */
-    onIsControlledExternallyEffect() {
-        effect(() => {
-            const isControlledExternally = this.rootDirective.controlledExternally()();
-            untracked(() => {
-                this.renderer.setStyle(this.elementRef.nativeElement, 'display', isControlledExternally ? null : 'none');
-            });
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxHoverCardCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxHoverCardCloseDirective, isStandalone: true, selector: "[rdxHoverCardClose]", host: { attributes: { "type": "button" }, listeners: { "click": "rootDirective.handleClose(true)" } }, providers: [
-            {
-                provide: RdxHoverCardCloseToken,
-                useExisting: forwardRef(() => RdxHoverCardCloseDirective)
-            }
-        ], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxHoverCardCloseDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxHoverCardClose]',
-                    host: {
-                        type: 'button',
-                        '(click)': 'rootDirective.handleClose(true)'
-                    },
-                    providers: [
-                        {
-                            provide: RdxHoverCardCloseToken,
-                            useExisting: forwardRef(() => RdxHoverCardCloseDirective)
-                        }
-                    ]
-                }]
-        }], ctorParameters: () => [] });
-
-class RdxHoverCardContentAttributesComponent {
-    constructor() {
-        /** @ignore */
-        this.rootDirective = injectHoverCardRoot();
-        /** @ignore */
-        this.name = computed(() => `rdx-hover-card-content-attributes-${this.rootDirective.uniqueId()}`, ...(ngDevMode ? [{ debugName: "name" }] : []));
-        /** @ignore */
-        this.disableAnimation = computed(() => !this.canAnimate(), ...(ngDevMode ? [{ debugName: "disableAnimation" }] : []));
-    }
-    /** @ignore */
-    onAnimationStart(_) {
-        this.rootDirective.cssAnimationStatus.set(this.rootDirective.state() === RdxHoverCardState.OPEN
-            ? RdxHoverCardAnimationStatus.OPEN_STARTED
-            : RdxHoverCardAnimationStatus.CLOSED_STARTED);
-    }
-    /** @ignore */
-    onAnimationEnd(_) {
-        this.rootDirective.cssAnimationStatus.set(this.rootDirective.state() === RdxHoverCardState.OPEN
-            ? RdxHoverCardAnimationStatus.OPEN_ENDED
-            : RdxHoverCardAnimationStatus.CLOSED_ENDED);
-    }
-    /** @ignore */
-    pointerenter() {
-        this.rootDirective.handleOpen();
-    }
-    /** @ignore */
-    pointerleave() {
-        this.rootDirective.handleClose();
-    }
-    /** @ignore */
-    focus() {
-        this.rootDirective.handleOpen();
-    }
-    /** @ignore */
-    blur() {
-        this.rootDirective.handleClose();
-    }
-    /** @ignore */
-    canAnimate() {
-        return (this.rootDirective.cssAnimation() &&
-            ((this.rootDirective.cssOpeningAnimation() && this.rootDirective.state() === RdxHoverCardState.OPEN) ||
-                (this.rootDirective.cssClosingAnimation() && this.rootDirective.state() === RdxHoverCardState.CLOSED)));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxHoverCardContentAttributesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: RdxHoverCardContentAttributesComponent, isStandalone: true, selector: "[rdxHoverCardContentAttributes]", host: { listeners: { "animationstart": "onAnimationStart($event)", "animationend": "onAnimationEnd($event)", "pointerenter": "pointerenter()", "pointerleave": "pointerleave()", "focus": "focus()", "blur": "blur()" }, properties: { "attr.role": "\"dialog\"", "attr.id": "name()", "attr.data-state": "rootDirective.state()", "attr.data-side": "rootDirective.contentDirective().side()", "attr.data-align": "rootDirective.contentDirective().align()", "style": "disableAnimation() ? {animation: \"none !important\"} : null" } }, providers: [
-            {
-                provide: RdxHoverCardContentAttributesToken,
-                useExisting: forwardRef(() => RdxHoverCardContentAttributesComponent)
-            }
-        ], ngImport: i0, template: `
-        <ng-content />
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxHoverCardContentAttributesComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[rdxHoverCardContentAttributes]',
-                    template: `
-        <ng-content />
-    `,
-                    host: {
-                        '[attr.role]': '"dialog"',
-                        '[attr.id]': 'name()',
-                        '[attr.data-state]': 'rootDirective.state()',
-                        '[attr.data-side]': 'rootDirective.contentDirective().side()',
-                        '[attr.data-align]': 'rootDirective.contentDirective().align()',
-                        '[style]': 'disableAnimation() ? {animation: "none !important"} : null',
-                        '(animationstart)': 'onAnimationStart($event)',
-                        '(animationend)': 'onAnimationEnd($event)',
-                        '(pointerenter)': 'pointerenter()',
-                        '(pointerleave)': 'pointerleave()',
-                        '(focus)': 'focus()',
-                        '(blur)': 'blur()'
-                    },
-                    providers: [
-                        {
-                            provide: RdxHoverCardContentAttributesToken,
-                            useExisting: forwardRef(() => RdxHoverCardContentAttributesComponent)
-                        }
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }] });
-
-const _imports = [
-    RdxHoverCardArrowDirective,
-    RdxHoverCardCloseDirective,
-    RdxHoverCardContentDirective,
-    RdxHoverCardTriggerDirective,
-    RdxHoverCardRootDirective,
-    RdxHoverCardAnchorDirective,
-    RdxHoverCardContentAttributesComponent
-];
-class RdxHoverCardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxHoverCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: RdxHoverCardModule, imports: [RdxHoverCardArrowDirective,
-            RdxHoverCardCloseDirective,
-            RdxHoverCardContentDirective,
-            RdxHoverCardTriggerDirective,
-            RdxHoverCardRootDirective,
-            RdxHoverCardAnchorDirective,
-            RdxHoverCardContentAttributesComponent], exports: [RdxHoverCardArrowDirective,
-            RdxHoverCardCloseDirective,
-            RdxHoverCardContentDirective,
-            RdxHoverCardTriggerDirective,
-            RdxHoverCardRootDirective,
-            RdxHoverCardAnchorDirective,
-            RdxHoverCardContentAttributesComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxHoverCardModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxHoverCardModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [..._imports],
-                    exports: [..._imports]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { RdxHoverCardAnchorDirective, RdxHoverCardArrowDirective, RdxHoverCardCloseDirective, RdxHoverCardContentAttributesComponent, RdxHoverCardContentDirective, RdxHoverCardModule, RdxHoverCardRootDirective, RdxHoverCardTriggerDirective };
-//# sourceMappingURL=radix-ng-primitives-hover-card.mjs.map