@radix-ng/primitives 1.0.0-beta.1 → 1.0.0-beta.3

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { booleanAttribute, inject, DestroyRef, signal, model, input, output, computed, effect, untracked, Directive, ElementRef, numberAttribute, afterNextRender, NgModule } from '@angular/core';
+import { booleanAttribute, inject, DestroyRef, signal, model, input, output, computed, effect, untracked, Directive, ElementRef, isDevMode, numberAttribute, afterNextRender, NgModule } from '@angular/core';
 import * as i1 from '@radix-ng/primitives/popper';
 import { RdxPopper, RdxPopperContentWrapper, RdxPopperArrow, RdxPopperContent, provideRdxPopperContentConfig, RdxPopperAnchor } from '@radix-ng/primitives/popper';
 import { createContext, useTransitionStatus, injectId, useScrollLock, useGraceArea } from '@radix-ng/primitives/core';
@@ -9,13 +9,12 @@ import { RdxDismissableLayer, provideRdxDismissableLayerConfig } from '@radix-ng
 import * as i3 from '@radix-ng/primitives/focus-scope';
 import { RdxFocusScope, provideRdxFocusScopeConfig } from '@radix-ng/primitives/focus-scope';
 import * as i1$1 from '@radix-ng/primitives/portal';
-import { RdxPortal } from '@radix-ng/primitives/portal';
-import * as i1$2 from '@radix-ng/primitives/presence';
-import { provideRdxPresenceContext, RdxPresenceDirective } from '@radix-ng/primitives/presence';
+import { RdxPortalPresence } from '@radix-ng/primitives/portal';
+import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
 
 const transformModal = (value) => value === 'trap-focus' ? value : booleanAttribute(value);
 const context = () => contextFor(inject(RdxPopoverRoot));
-const [injectRdxPopoverRootContext, provideRdxPopoverRootContext] = createContext('RdxPopoverRootContext');
+const [injectRdxPopoverRootContext, provideRdxPopoverRootContext] = createContext('RdxPopoverRootContext', 'components/popover');
 /**
  * Groups all parts of the popover.
  */
@@ -555,62 +554,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }], ctorParameters: () => [] });
 
 /**
- * Moves the popover to a different part of the DOM.
+ * Structural directive that teleports the popover content into a container (default `document.body`)
+ * while the popover is open, and keeps it mounted until any CSS exit `@keyframes` finishes.
+ *
+ * Apply it with the `*` microsyntax on the positioner — `<div *rdxPopoverPortal rdxPopoverPositioner>`
+ * — or as an explicit `<ng-template rdxPopoverPortal>`. For a custom container use the explicit form
+ * with `[container]`.
  */
 class RdxPopoverPortal {
-    constructor() {
-        this.rootContext = injectRdxPopoverRootContext();
-        /**
-         * Optional container to portal the content into. Defaults to `document.body`.
-         */
-        this.container = input(...(ngDevMode ? [undefined, { debugName: "container" }] : /* istanbul ignore next */ []));
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPopoverPortal, isStandalone: true, selector: "[rdxPopoverPortal]", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"" } }, hostDirectives: [{ directive: i1$1.RdxPortal, inputs: ["container", "container"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverPortal, isStandalone: true, selector: "ng-template[rdxPopoverPortal]", providers: [provideRdxPresenceContext(() => ({ present: injectRdxPopoverRootContext().isOpen }))], exportAs: ["rdxPopoverPortal"], hostDirectives: [{ directive: i1$1.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPortal, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxPopoverPortal]',
-                    hostDirectives: [
-                        {
-                            directive: RdxPortal,
-                            inputs: ['container']
-                        }
-                    ],
-                    host: {
-                        '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
-                        '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
-                        '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"'
-                    }
+                    selector: 'ng-template[rdxPopoverPortal]',
+                    exportAs: 'rdxPopoverPortal',
+                    hostDirectives: [{ directive: RdxPortalPresence, inputs: ['container'] }],
+                    providers: [provideRdxPresenceContext(() => ({ present: injectRdxPopoverRootContext().isOpen }))]
                 }]
-        }], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }] } });
-
+        }] });
 /**
- * Mounts the portal while the popover is open and waits for CSS exit keyframes before unmounting.
+ * Dev-mode guard: `rdxPopoverPortal` used to be an attribute directive on a `<div>`. It is now
+ * structural, so the old `<div rdxPopoverPortal>` markup would silently stop portaling — fail loudly
+ * instead.
  */
-class RdxPopoverPortalPresence {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPortalPresence, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverPortalPresence, isStandalone: true, selector: "ng-template[rdxPopoverPortalPresence]", providers: [
-            provideRdxPresenceContext(() => {
-                const context = injectRdxPopoverRootContext();
-                return { present: context.isOpen };
-            })
-        ], hostDirectives: [{ directive: i1$2.RdxPresenceDirective }], ngImport: i0 }); }
+class RdxPopoverPortalMisuseGuard {
+    constructor() {
+        if (isDevMode()) {
+            throw new Error('[rdxPopoverPortal] is now a structural directive. ' +
+                'Use `*rdxPopoverPortal` on the positioner element or `<ng-template rdxPopoverPortal>`. ' +
+                'rdxPopoverPortalPresence has been removed. See https://radix-ng.com/components/popover.md');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverPortalMisuseGuard, isStandalone: true, selector: "[rdxPopoverPortal]:not(ng-template)", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPortalPresence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPortalMisuseGuard, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'ng-template[rdxPopoverPortalPresence]',
-                    hostDirectives: [RdxPresenceDirective],
-                    providers: [
-                        provideRdxPresenceContext(() => {
-                            const context = injectRdxPopoverRootContext();
-                            return { present: context.isOpen };
-                        })
-                    ]
+                    selector: '[rdxPopoverPortal]:not(ng-template)'
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Positions the popover against its trigger.
@@ -1070,8 +1055,8 @@ function createRdxPopoverHandle() {
 const popoverImports = [
     RdxPopoverRoot,
     RdxPopoverTrigger,
-    RdxPopoverPortalPresence,
     RdxPopoverPortal,
+    RdxPopoverPortalMisuseGuard,
     RdxPopoverBackdrop,
     RdxPopoverPositioner,
     RdxPopoverPopup,
@@ -1085,8 +1070,8 @@ class RdxPopoverModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverModule, imports: [RdxPopoverRoot,
             RdxPopoverTrigger,
-            RdxPopoverPortalPresence,
             RdxPopoverPortal,
+            RdxPopoverPortalMisuseGuard,
             RdxPopoverBackdrop,
             RdxPopoverPositioner,
             RdxPopoverPopup,
@@ -1096,8 +1081,8 @@ class RdxPopoverModule {
             RdxPopoverClose,
             RdxPopoverViewport], exports: [RdxPopoverRoot,
             RdxPopoverTrigger,
-            RdxPopoverPortalPresence,
             RdxPopoverPortal,
+            RdxPopoverPortalMisuseGuard,
             RdxPopoverBackdrop,
             RdxPopoverPositioner,
             RdxPopoverPopup,
@@ -1120,5 +1105,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RdxPopoverArrow, RdxPopoverBackdrop, RdxPopoverClose, RdxPopoverDescription, RdxPopoverHandle, RdxPopoverModule, RdxPopoverPopup, RdxPopoverPortal, RdxPopoverPortalPresence, RdxPopoverPositioner, RdxPopoverRoot, RdxPopoverTitle, RdxPopoverTrigger, RdxPopoverViewport, createRdxPopoverHandle, injectRdxPopoverRootContext, popoverImports, provideRdxPopoverRootContext };
+export { RdxPopoverArrow, RdxPopoverBackdrop, RdxPopoverClose, RdxPopoverDescription, RdxPopoverHandle, RdxPopoverModule, RdxPopoverPopup, RdxPopoverPortal, RdxPopoverPortalMisuseGuard, RdxPopoverPositioner, RdxPopoverRoot, RdxPopoverTitle, RdxPopoverTrigger, RdxPopoverViewport, createRdxPopoverHandle, injectRdxPopoverRootContext, popoverImports, provideRdxPopoverRootContext };
 //# sourceMappingURL=radix-ng-primitives-popover.mjs.map