@radix-ng/primitives 0.22.0 → 0.24.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, TemplateRef, DestroyRef, computed, input, output, effect, untracked, SimpleChange, Directive, ElementRef, signal, booleanAttribute, contentChild, ViewContainerRef, afterNextRender, isDevMode, assertInInjectionContext, forwardRef, Renderer2, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { 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 * as i1 from '@angular/cdk/overlay';
 import { Overlay, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { DOCUMENT } from '@angular/common';
@@ -173,29 +173,23 @@ function getContentPosition(sideAndAlignWithOffsets) {
     const position = {
         ...(POPOVER_POSITIONS[side]?.[align] ?? POPOVER_POSITIONS[RdxPopoverSide.Top][RdxPopoverAlign.Center])
     };
-    if (sideOffset > 0) {
-        let xFactor = 0;
-        let yFactor = 0;
-        switch (side) {
-            case RdxPopoverSide.Top:
-                yFactor = -1;
-                break;
-            case RdxPopoverSide.Bottom:
-                yFactor = 1;
-                break;
-            case RdxPopoverSide.Left:
-                xFactor = -1;
-                break;
-            case RdxPopoverSide.Right:
-                xFactor = 1;
-                break;
+    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;
+            }
         }
-        position.offsetX = xFactor * sideOffset;
-        position.offsetY = yFactor * sideOffset;
-    }
-    if ([RdxPopoverAlign.Start, RdxPopoverAlign.End].includes(align) && alignOffset) {
-        const alignOffsetFactor = align === RdxPopoverAlign.End ? -1 : 1;
-        position.offsetX = alignOffsetFactor * alignOffset;
     }
     return position;
 }
@@ -283,15 +277,21 @@ class RdxPopoverContentDirective {
          * @description Whether to add some alternate positions of the content.
          * @default false
          */
-        this.disableAlternatePositions = input(false);
+        this.alternatePositionsDisabled = input(false);
+        /** @description Whether to prevent `onOverlayEscapeKeyDown` handler from calling. */
+        this.onOverlayEscapeKeyDownDisabled = input(false);
+        /** @description Whether to prevent `onOverlayOutsideClick` handler from calling. */
+        this.onOverlayOutsideClickDisabled = input(false);
         /**
-         * @description Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.
+         * @description Event handler called when the escape key is down.
+         * It can be prevented by setting `onOverlayEscapeKeyDownDisabled` input to `true`.
          */
-        this.onEscapeKeyDown = output();
+        this.onOverlayEscapeKeyDown = output();
         /**
-         * @description Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.
+         * @description Event handler called when a pointer event occurs outside the bounds of the component.
+         * It can be prevented by setting `onOverlayOutsideClickDisabled` input to `true`.
          */
-        this.onOutsideClick = output();
+        this.onOverlayOutsideClick = output();
         /**
          * @description Event handler called after the overlay is open
          */
@@ -308,6 +308,7 @@ class RdxPopoverContentDirective {
     /** @ignore */
     ngOnInit() {
         this.setScrollStrategy();
+        this.setHasBackdrop();
         this.setDisableClose();
         this.onAttach();
         this.onDetach();
@@ -340,9 +341,10 @@ class RdxPopoverContentDirective {
     connectKeydownEscape() {
         this.connectedOverlay.overlayKeydown
             .asObservable()
-            .pipe(filter((event) => event.key === 'Escape'), tap((event) => {
-            this.onEscapeKeyDown.emit(event);
-        }), filter((event) => !event.defaultPrevented && !this.popoverRoot.firstDefaultOpen()), tap(() => {
+            .pipe(filter(() => !this.onOverlayEscapeKeyDownDisabled() &&
+            !this.popoverRoot.rdxCdkEventService?.primitivePreventedFromCdkEvent(this.popoverRoot, 'cdkOverlayEscapeKeyDown')), filter((event) => event.key === 'Escape'), tap((event) => {
+            this.onOverlayEscapeKeyDown.emit(event);
+        }), filter(() => !this.popoverRoot.firstDefaultOpen()), tap(() => {
             this.popoverRoot.handleClose();
         }), takeUntilDestroyed(this.destroyRef))
             .subscribe();
@@ -351,7 +353,8 @@ class RdxPopoverContentDirective {
     connectOutsideClick() {
         this.connectedOverlay.overlayOutsideClick
             .asObservable()
-            .pipe(
+            .pipe(filter(() => !this.onOverlayOutsideClickDisabled() &&
+            !this.popoverRoot.rdxCdkEventService?.primitivePreventedFromCdkEvent(this.popoverRoot, '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
@@ -362,8 +365,8 @@ class RdxPopoverContentDirective {
                     .popoverTriggerDirective()
                     .elementRef.nativeElement.contains(event.target));
         }), tap((event) => {
-            this.onOutsideClick.emit(event);
-        }), filter((event) => !event.defaultPrevented && !this.popoverRoot.firstDefaultOpen()), tap(() => {
+            this.onOverlayOutsideClick.emit(event);
+        }), filter(() => !this.popoverRoot.firstDefaultOpen()), tap(() => {
             this.popoverRoot.handleClose();
         }), takeUntilDestroyed(this.destroyRef))
             .subscribe();
@@ -399,6 +402,12 @@ class RdxPopoverContentDirective {
         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;
@@ -431,7 +440,7 @@ class RdxPopoverContentDirective {
             alignOffset: offsets.alignOffset
         });
         const positions = [basePosition];
-        if (!this.disableAlternatePositions()) {
+        if (!this.alternatePositionsDisabled()) {
             /**
              * Alternate positions for better user experience along the X/Y axis (e.g. vertical/horizontal scrolling)
              */
@@ -464,7 +473,7 @@ class RdxPopoverContentDirective {
     onPositionChangeEffect() {
         effect(() => {
             const positions = this.positions();
-            this.disableAlternatePositions();
+            this.alternatePositionsDisabled();
             untracked(() => {
                 this.setPositions(positions);
             });
@@ -477,7 +486,7 @@ class RdxPopoverContentDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxPopoverContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.11", type: RdxPopoverContentDirective, isStandalone: true, selector: "[rdxPopoverContent]", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, disableAlternatePositions: { classPropertyName: "disableAlternatePositions", publicName: "disableAlternatePositions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onEscapeKeyDown: "onEscapeKeyDown", onOutsideClick: "onOutsideClick", onOpen: "onOpen", onClosed: "onClosed" }, hostDirectives: [{ directive: i1.CdkConnectedOverlay }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.11", type: RdxPopoverContentDirective, isStandalone: true, selector: "[rdxPopoverContent]", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, 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: [{
             type: Directive,
@@ -526,6 +535,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
                 }]
         }] });
 
+const RdxCdkEventServiceWindowKey = Symbol('__RdxCdkEventService__');
+
+function eventTypeAsPrimitiveConfigKey(eventType) {
+    return `prevent${eventType[0].toUpperCase()}${eventType.slice(1)}`;
+}
+class RdxCdkEventService {
+    #clickDomRootEventCallbacks;
+    constructor() {
+        this.document = inject(DOCUMENT);
+        this.destroyRef = inject(DestroyRef);
+        this.ngZone = inject(NgZone);
+        this.renderer2 = inject(Renderer2);
+        this.onDestroyCallbacks = new Set([deleteRdxCdkEventServiceWindowKey]);
+        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, 
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                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: "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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxCdkEventService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+const RdxCdkEventServiceToken = new InjectionToken('RdxCdkEventServiceToken');
+const existsErrorMessage = 'RdxCdkEventService should be provided only once!';
+const deleteRdxCdkEventServiceWindowKey = () => {
+    delete window[RdxCdkEventServiceWindowKey];
+};
+const getProvider = (throwWhenExists = true) => ({
+    provide: RdxCdkEventServiceToken,
+    useFactory: () => {
+        isDevMode() && console.log('providing RdxCdkEventService...');
+        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;
 class RdxPopoverRootDirective {
     constructor() {
@@ -585,6 +745,8 @@ class RdxPopoverRootDirective {
         /** @ignore */
         this.viewContainerRef = inject(ViewContainerRef);
         /** @ignore */
+        this.rdxCdkEventService = injectRdxCdkEventService();
+        /** @ignore */
         this.destroyRef = inject(DestroyRef);
         /** @ignore */
         this.state = signal(RdxPopoverState.CLOSED);
@@ -605,6 +767,8 @@ class RdxPopoverRootDirective {
                 });
             });
         };
+        this.rdxCdkEventService?.registerPrimitive(this);
+        this.destroyRef.onDestroy(() => this.rdxCdkEventService?.deregisterPrimitive(this));
         this.onStateChangeEffect();
         this.onCssAnimationStatusChangeChangeEffect();
         this.onOpenChangeEffect();
@@ -863,12 +1027,17 @@ class RdxPopoverAnchorDirective {
         this.popoverRoot = popoverRoot;
     }
     emitOutsideClick() {
+        if (!this.popoverRoot?.isOpen() ||
+            this.popoverRoot?.popoverContentDirective().onOverlayOutsideClickDisabled()) {
+            return;
+        }
         const clickEvent = new MouseEvent('click', {
             view: this.document.defaultView,
             bubbles: true,
-            cancelable: true
+            cancelable: true,
+            relatedTarget: this.elementRef.nativeElement
         });
-        this.document.body.dispatchEvent(clickEvent);
+        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: [