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

package/fesm2022/radix-ng-primitives-navigation-menu.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, computed, Directive, input, signal, TemplateRef, booleanAttribute, effect, untracked, ElementRef, output, DestroyRef, numberAttribute, model, ViewContainerRef, Renderer2, NgModule } from '@angular/core';
+import { inject, computed, Directive, input, signal, TemplateRef, booleanAttribute, effect, untracked, ElementRef, output, DestroyRef, isDevMode, numberAttribute, model, ViewContainerRef, Renderer2, NgModule } from '@angular/core';
 import * as i1 from '@radix-ng/primitives/popper';
 import { RdxPopperContentWrapper, RdxPopperArrow, RdxPopperContent, provideRdxPopperContentConfig, RdxPopper } from '@radix-ng/primitives/popper';
 import { createContext, ENTER, SPACE, ARROW_DOWN, ARROW_UP, HOME, END, useGraceArea, useTransitionStatus, injectDocument, ARROW_LEFT, ARROW_RIGHT, getMaxTransitionDuration } from '@radix-ng/primitives/core';
@@ -9,9 +9,8 @@ import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-int
 import * as i2 from '@radix-ng/primitives/dismissable-layer';
 import { RdxDismissableLayer, RdxDismissableLayersContextToken } from '@radix-ng/primitives/dismissable-layer';
 import * as i1$2 from '@radix-ng/primitives/portal';
-import { RdxPortal } from '@radix-ng/primitives/portal';
-import * as i1$3 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 [injectNavigationMenuRootContext, provideNavigationMenuRootContext] = createContext('RdxNavigationMenuRootContext', 'components/navigation-menu');
 
@@ -485,66 +484,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }], ctorParameters: () => [], propDecorators: { escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }], focusOutside: [{ type: i0.Output, args: ["focusOutside"] }] } });
 
 /**
- * Moves the navigation menu popup to a different part of the DOM (by default `document.body`).
+ * Structural directive that teleports the navigation menu popup into a container (default
+ * `document.body`) while the menu is open, and keeps it mounted until any CSS exit `@keyframes`
+ * finishes.
+ *
+ * Apply it with the `*` microsyntax on the positioner —
+ * `<div *rdxNavigationMenuPortal rdxNavigationMenuPositioner>` — or as an explicit
+ * `<ng-template rdxNavigationMenuPortal>`. For a custom container use the explicit form with
+ * `[container]`.
  */
 class RdxNavigationMenuPortal {
-    constructor() {
-        this.rootContext = injectNavigationMenuRootContext();
-        /**
-         * Optional container to portal the popup 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: RdxNavigationMenuPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuPortal, isStandalone: true, selector: "[rdxNavigationMenuPortal]", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"" } }, hostDirectives: [{ directive: i1$2.RdxPortal, inputs: ["container", "container"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuPortal, isStandalone: true, selector: "ng-template[rdxNavigationMenuPortal]", providers: [provideRdxPresenceContext(() => ({ present: injectNavigationMenuRootContext().isOpen }))], exportAs: ["rdxNavigationMenuPortal"], hostDirectives: [{ directive: i1$2.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPortal, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxNavigationMenuPortal]',
-                    hostDirectives: [
-                        {
-                            directive: RdxPortal,
-                            inputs: ['container']
-                        }
-                    ],
-                    host: {
-                        '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
-                        '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
-                        '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"'
-                    }
+                    selector: 'ng-template[rdxNavigationMenuPortal]',
+                    exportAs: 'rdxNavigationMenuPortal',
+                    hostDirectives: [{ directive: RdxPortalPresence, inputs: ['container'] }],
+                    providers: [provideRdxPresenceContext(() => ({ present: injectNavigationMenuRootContext().isOpen }))]
                 }]
-        }], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }] } });
-
+        }] });
 /**
- * Mounts the popup while the menu is open and waits for CSS exit keyframes before unmounting.
- *
- * ```html
- * <ng-template rdxNavigationMenuPortalPresence>…</ng-template>
- * ```
+ * Dev-mode guard: `rdxNavigationMenuPortal` used to be an attribute directive on a `<div>`. It is now
+ * structural, so the old `<div rdxNavigationMenuPortal>` markup would silently stop portaling — fail
+ * loudly instead.
  */
-class RdxNavigationMenuPortalPresence {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPortalPresence, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuPortalPresence, isStandalone: true, selector: "ng-template[rdxNavigationMenuPortalPresence]", providers: [
-            provideRdxPresenceContext(() => {
-                const context = injectNavigationMenuRootContext();
-                return { present: context.isOpen };
-            })
-        ], hostDirectives: [{ directive: i1$3.RdxPresenceDirective }], ngImport: i0 }); }
+class RdxNavigationMenuPortalMisuseGuard {
+    constructor() {
+        if (isDevMode()) {
+            throw new Error('[rdxNavigationMenuPortal] is now a structural directive. ' +
+                'Use `*rdxNavigationMenuPortal` on the positioner element or ' +
+                '`<ng-template rdxNavigationMenuPortal>`. rdxNavigationMenuPortalPresence has been removed. ' +
+                'See https://radix-ng.com/components/navigation-menu.md');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuPortalMisuseGuard, isStandalone: true, selector: "[rdxNavigationMenuPortal]:not(ng-template)", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPortalPresence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPortalMisuseGuard, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'ng-template[rdxNavigationMenuPortalPresence]',
-                    hostDirectives: [RdxPresenceDirective],
-                    providers: [
-                        provideRdxPresenceContext(() => {
-                            const context = injectNavigationMenuRootContext();
-                            return { present: context.isOpen };
-                        })
-                    ]
+                    selector: '[rdxNavigationMenuPortal]:not(ng-template)'
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Positions the shared popup against the active trigger.
@@ -1248,7 +1232,7 @@ const navigationMenuImports = [
     RdxNavigationMenuContent,
     RdxNavigationMenuLink,
     RdxNavigationMenuPortal,
-    RdxNavigationMenuPortalPresence,
+    RdxNavigationMenuPortalMisuseGuard,
     RdxNavigationMenuBackdrop,
     RdxNavigationMenuPositioner,
     RdxNavigationMenuPopup,
@@ -1265,7 +1249,7 @@ class RdxNavigationMenuModule {
             RdxNavigationMenuContent,
             RdxNavigationMenuLink,
             RdxNavigationMenuPortal,
-            RdxNavigationMenuPortalPresence,
+            RdxNavigationMenuPortalMisuseGuard,
             RdxNavigationMenuBackdrop,
             RdxNavigationMenuPositioner,
             RdxNavigationMenuPopup,
@@ -1278,7 +1262,7 @@ class RdxNavigationMenuModule {
             RdxNavigationMenuContent,
             RdxNavigationMenuLink,
             RdxNavigationMenuPortal,
-            RdxNavigationMenuPortalPresence,
+            RdxNavigationMenuPortalMisuseGuard,
             RdxNavigationMenuBackdrop,
             RdxNavigationMenuPositioner,
             RdxNavigationMenuPopup,
@@ -1298,5 +1282,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RdxNavigationMenuArrow, RdxNavigationMenuBackdrop, RdxNavigationMenuContent, RdxNavigationMenuIcon, RdxNavigationMenuItem, RdxNavigationMenuLink, RdxNavigationMenuList, RdxNavigationMenuModule, RdxNavigationMenuPopup, RdxNavigationMenuPortal, RdxNavigationMenuPortalPresence, RdxNavigationMenuPositioner, RdxNavigationMenuRoot, RdxNavigationMenuTrigger, RdxNavigationMenuViewport, injectNavigationMenuRootContext, navigationMenuImports, provideNavigationMenuRootContext };
+export { RdxNavigationMenuArrow, RdxNavigationMenuBackdrop, RdxNavigationMenuContent, RdxNavigationMenuIcon, RdxNavigationMenuItem, RdxNavigationMenuLink, RdxNavigationMenuList, RdxNavigationMenuModule, RdxNavigationMenuPopup, RdxNavigationMenuPortal, RdxNavigationMenuPortalMisuseGuard, RdxNavigationMenuPositioner, RdxNavigationMenuRoot, RdxNavigationMenuTrigger, RdxNavigationMenuViewport, injectNavigationMenuRootContext, navigationMenuImports, provideNavigationMenuRootContext };
 //# sourceMappingURL=radix-ng-primitives-navigation-menu.mjs.map