@radix-ng/primitives 1.0.0-beta.5 → 1.0.2

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

@@ -456,29 +456,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxPopoverBackdrop {
     constructor() {
         this.rootContext = injectRdxPopoverRootContext();
+        const host = inject(ElementRef).nativeElement;
+        host.style.setProperty('-webkit-user-select', 'none');
         // Register the backdrop as owned DOM footprint for primitive-specific checks. The focus manager's
         // marker keep-set stays narrow and does not keep sibling backdrop roots.
         const floatingContext = inject(RDX_FLOATING_ROOT_CONTEXT, { optional: true });
         if (floatingContext) {
-            const host = inject(ElementRef).nativeElement;
             floatingContext.addFloatingElement(host);
             inject(DestroyRef).onDestroy(() => floatingContext.removeFloatingElement(host));
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverBackdrop, isStandalone: true, selector: "[rdxPopoverBackdrop]", host: { properties: { "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverBackdrop, isStandalone: true, selector: "[rdxPopoverBackdrop]", host: { attributes: { "role": "presentation" }, properties: { "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "style.pointer-events": "rootContext.openChangeReason() === \"trigger-hover\" ? \"none\" : null", "style.user-select": "\"none\"" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverBackdrop, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverBackdrop]',
                     host: {
+                        role: 'presentation',
                         '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
                         '[attr.data-ending-style]': 'rootContext.transitionStatus() === "ending" ? "" : undefined',
                         '[attr.data-instant]': 'rootContext.instant() ? "" : undefined',
                         '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
                         '[attr.data-starting-style]': 'rootContext.transitionStatus() === "starting" ? "" : undefined',
-                        '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"'
+                        '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"',
+                        '[style.pointer-events]': 'rootContext.openChangeReason() === "trigger-hover" ? "none" : null',
+                        '[style.user-select]': '"none"'
                     }
                 }]
         }], ctorParameters: () => [] });
@@ -586,13 +590,17 @@ class RdxPopoverPopup {
                     closeInteractionType: () => rootContext.closeInteractionType()
                 };
             })
-        ], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFloatingNodeRegistration }, { directive: i3.RdxFloatingFocusManager }], ngImport: i0 }); }
+        ], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFloatingNodeRegistration }, { directive: i3.RdxFloatingFocusManager, inputs: ["initialFocus", "initialFocus", "returnFocus", "finalFocus"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPopup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverPopup]',
-                    hostDirectives: [RdxPopperContent, RdxFloatingNodeRegistration, RdxFloatingFocusManager],
+                    hostDirectives: [
+                        RdxPopperContent,
+                        RdxFloatingNodeRegistration,
+                        { directive: RdxFloatingFocusManager, inputs: ['initialFocus', 'returnFocus: finalFocus'] }
+                    ],
                     providers: [
                         provideFloatingFocusManagerConfig(() => {
                             const rootContext = injectRdxPopoverRootContext();
@@ -663,22 +671,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxPopoverDescription {
     constructor() {
         this.rootContext = injectRdxPopoverRootContext();
-        this.id = injectId('rdx-popover-description-');
-        this.rootContext.setDescriptionId(this.id);
+        this.generatedId = injectId('rdx-popover-description-');
+        this.idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
+        this.id = computed(() => this.idInput() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        effect((onCleanup) => {
+            const id = this.id();
+            this.rootContext.setDescriptionId(id);
+            onCleanup(() => this.rootContext.setDescriptionId(undefined));
+        });
         inject(DestroyRef).onDestroy(() => this.rootContext.setDescriptionId(undefined));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverDescription, isStandalone: true, selector: "[rdxPopoverDescription]", host: { properties: { "id": "id" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPopoverDescription, isStandalone: true, selector: "[rdxPopoverDescription]", inputs: { idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverDescription, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverDescription]',
                     host: {
-                        '[id]': 'id'
+                        '[id]': 'id()'
                     }
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 /**
  * Structural directive that teleports the popover content into a container (default `document.body`)
@@ -778,22 +792,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxPopoverTitle {
     constructor() {
         this.rootContext = injectRdxPopoverRootContext();
-        this.id = injectId('rdx-popover-title-');
-        this.rootContext.setTitleId(this.id);
+        this.generatedId = injectId('rdx-popover-title-');
+        this.idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
+        this.id = computed(() => this.idInput() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        effect((onCleanup) => {
+            const id = this.id();
+            this.rootContext.setTitleId(id);
+            onCleanup(() => this.rootContext.setTitleId(undefined));
+        });
         inject(DestroyRef).onDestroy(() => this.rootContext.setTitleId(undefined));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverTitle, isStandalone: true, selector: "[rdxPopoverTitle]", host: { properties: { "id": "id" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPopoverTitle, isStandalone: true, selector: "[rdxPopoverTitle]", inputs: { idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverTitle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverTitle]',
                     host: {
-                        '[id]': 'id'
+                        '[id]': 'id()'
                     }
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 /**
  * A button that opens the popover.
@@ -842,6 +862,11 @@ class RdxPopoverTrigger {
         });
         this.isPressed = computed(() => this.triggerInteraction.isActive() && this.rootContext()?.openChangeReason() === 'trigger-press', ...(ngDevMode ? [{ debugName: "isPressed" }] : /* istanbul ignore next */ []));
         this.generatedId = injectId('rdx-popover-trigger-');
+        effect(() => {
+            if (!this.handle() && !this.parentRootContext) {
+                rdxDevError('popover/trigger-missing-root', '`rdxPopoverTrigger` must be used inside `rdxPopoverRoot` or receive a `handle` connected to a root.', 'components/popover');
+            }
+        });
         effect((onCleanup) => {
             const handle = this.handle();
             if (handle) {